PageSourceSearch

https://basis.vercel.app/typography

html basis.vercel.app collected 2026-10-03 06:10:07 UTC 61,383 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.0a3d2aa49a0a0319be35.css" id="gatsby-global-css">@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:100;src:local("Montserrat Thin "),local("Montserrat-Thin"),url(/static/montserrat-latin-100-191cc9f50f3b76b9617cb383f19acb7d.woff2) format("woff2"),url(/static/montserrat-latin-100-370318464551d5f25b0f0a78f374faac.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:100;src:local("Montserrat Thin italic"),local("Montserrat-Thinitalic"),url(/static/montserrat-latin-100italic-bdeaeb79db315697bd173a55b097dc18.woff2) format("woff2"),url(/static/montserrat-latin-100italic-ecf7d49386e8f265878e735db34a7c4b.woff) format("woff")}@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:200;src:local("Montserrat Extra Light "),local("Montserrat-Extra Light"),url(/static/montserrat-latin-200-85d5ef9db7f2dc6979172a4a3b2c57cb.woff2) format("woff2"),url(/static/montserrat-latin-200-1fc98e126a3d152549240e6244d7e669.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:200;src:local("Montserrat Extra Light italic"),local("Montserrat-Extra Lightitalic"),url(/static/montserrat-latin-200italic-49095760a498d024fe1a85a078850df9.woff2) format("woff2"),url(/static/montserrat-latin-200italic-fe46cf8b9462c820457d3bf537e4057f.woff) format("woff")}@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:300;src:local("Montserrat Light "),local("Montserrat-Light"),url(/static/montserrat-latin-300-7c3daf12b706645b5d3710f863a4da04.woff2) format("woff2"),url(/static/montserrat-latin-300-8dc95fab9cf98d02ca8d76e97d3dff60.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:300;src:local("Montserrat Light italic"),local("Montserrat-Lightitalic"),url(/static/montserrat-latin-300italic-f20b178ca2024a5eac8e42e6649db86c.woff2) format("woff2"),url(/static/montserrat-latin-300italic-3fe16939288856e8e828fa2661bf2354.woff) format("woff")}@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:400;src:local("Montserrat Regular "),local("Montserrat-Regular"),url(/static/montserrat-latin-400-bc3aa95dca08f5fee5291e34959c27bc.woff2) format("woff2"),url(/static/montserrat-latin-400-8102c4838f9e3d08dad644290a9cb701.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:400;src:local("Montserrat Regular italic"),local("Montserrat-Regularitalic"),url(/static/montserrat-latin-400italic-5cad650422a7184467af5a4d17b264c4.woff2) format("woff2"),url(/static/montserrat-latin-400italic-d191f22af3bb50902b99ac577f81a322.woff) format("woff")}@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:500;src:local("Montserrat Medium "),local("Montserrat-Medium"),url(/static/montserrat-latin-500-92d16e458625f4d2c8940f6bdca0ff09.woff2) format("woff2"),url(/static/montserrat-latin-500-8b763220218ffc11c57c84ddb80e7b26.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:500;src:local("Montserrat Medium italic"),local("Montserrat-Mediumitalic"),url(/static/montserrat-latin-500italic-47bfcca6b69d6a9acca7a8bff17193e2.woff2) format("woff2"),url(/static/montserrat-latin-500italic-72c01f753c3940c0b9cb6bf2389caddf.woff) format("woff")}@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:600;src:local("Montserrat SemiBold "),local("Montserrat-SemiBold"),url(/static/montserrat-latin-600-6fb1b5623e528e27c18658fecf5ee0ee.woff2) format("woff2"),url(/static/montserrat-latin-600-7c839d15a6f54e7025ba8c0c4b333e8f.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:600;src:local("Montserrat SemiBold italic"),local("Montserrat-SemiBolditalic"),url(/static/montserrat-latin-600italic-60789af1c9338ed1a9546722ec54b4f7.woff2) format("woff2"),url(/static/montserrat-latin-600italic-f3d4de8d0afb19e777c79032ce828e3d.woff) format("woff")}@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:700;src:local("Montserrat Bold "),local("Montserrat-Bold"),url(/static/montserrat-latin-700-39d93cf678c740f9f6b2b1cfde34bee3.woff2) format("woff2"),url(/static/montserrat-latin-700-80f10bd382f0df1cd650fec59f3c9394.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:700;src:local("Montserrat Bold italic"),local("Montserrat-Bolditalic"),url(/static/montserrat-latin-700italic-ba136d97b14e82284dd595e257f11c47.woff2) format("woff2"),url(/static/montserrat-latin-700italic-8c98142b425630821139c24bd1698700.woff) format("woff")}@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:800;src:local("Montserrat ExtraBold "),local("Montserrat-ExtraBold"),url(/static/montserrat-latin-800-b7018be9ed6cd94da8b6675b3a468c3b.woff2) format("woff2"),url(/static/montserrat-latin-800-9a9befcf50d64f9d2d19d8b1d1984add.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:800;src:local("Montserrat ExtraBold italic"),local("Montserrat-ExtraBolditalic"),url(/static/montserrat-latin-800italic-540ffdd223d1a9ad3d4e678e1a23372e.woff2) format("woff2"),url(/static/montserrat-latin-800italic-897086f99f4e1f45e6b1e9368527d0bc.woff) format("woff")}@font-face{font-family:Montserrat;font-style:normal;font-display:swap;font-weight:900;src:local("Montserrat Black "),local("Montserrat-Black"),url(/static/montserrat-latin-900-58cd789700850375b834e8b6776002eb.woff2) format("woff2"),url(/static/montserrat-latin-900-26d42c9428780e545a540bbb50c84bce.woff) format("woff")}@font-face{font-family:Montserrat;font-style:italic;font-display:swap;font-weight:900;src:local("Montserrat Black italic"),local("Montserrat-Blackitalic"),url(/static/montserrat-latin-900italic-451157bc8861fe54f523b3669a3def71.woff2) format("woff2"),url(/static/montserrat-latin-900italic-a8ec4957e1c24f5793305763ad9845b3.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:100;src:local("Roboto Thin "),local("Roboto-Thin"),url(/static/roboto-latin-100-7370c3679472e9560965ff48a4399d0b.woff2) format("woff2"),url(/static/roboto-latin-100-5cb7edfceb233100075dc9a1e12e8da3.w
1off) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:100;src:local("Roboto Thin italic"),local("Roboto-Thinitalic"),url(/static/roboto-latin-100italic-f8b1df51ba843179fa1cc9b53d58127a.woff2) format("woff2"),url(/static/roboto-latin-100italic-f9e8e590b4e0f1ff83469bb2a55b8488.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:local("Roboto Light "),local("Roboto-Light"),url(/static/roboto-latin-300-ef7c6637c68f269a882e73bcb57a7f6a.woff2) format("woff2"),url(/static/roboto-latin-300-b00849e00f4c2331cddd8ffb44a6720b.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:300;src:local("Roboto Light italic"),local("Roboto-Lightitalic"),url(/static/roboto-latin-300italic-14286f3ba79c6627433572dfa925202e.woff2) format("woff2"),url(/static/roboto-latin-300italic-4df32891a5f2f98a363314f595482e08.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:local("Roboto Regular "),local("Roboto-Regular"),url(/static/roboto-latin-400-479970ffb74f2117317f9d24d9e317fe.woff2) format("woff2"),url(/static/roboto-latin-400-60fa3c0614b8fb2f394fa29944c21540.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:400;src:local("Roboto Regular italic"),local("Roboto-Regularitalic"),url(/static/roboto-latin-400italic-51521a2a8da71e50d871ac6fd2187e87.woff2) format("woff2"),url(/static/roboto-latin-400italic-fe65b8335ee19dd944289f9ed3178c78.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:local("Roboto Medium "),local("Roboto-Medium"),url(/static/roboto-latin-500-020c97dc8e0463259c2f9df929bb0c69.woff2) format("woff2"),url(/static/roboto-latin-500-87284894879f5b1c229cb49c8ff6decc.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:500;src:local("Roboto Medium italic"),local("Roboto-Mediumitalic"),url(/static/roboto-latin-500italic-db4a2a231f52e497c0191e8966b0ee58.woff2) format("woff2"),url(/static/roboto-latin-500italic-288ad9c6e8b43cf02443a1f499bdf67e.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:local("Roboto Bold "),local("Roboto-Bold"),url(/static/roboto-latin-700-2735a3a69b509faf3577afd25bdf552e.woff2) format("woff2"),url(/static/roboto-latin-700-adcde98f1d584de52060ad7b16373da3.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:700;src:local("Roboto Bold italic"),local("Roboto-Bolditalic"),url(/static/roboto-latin-700italic-da0e717829e033a69dec97f1e155ae42.woff2) format("woff2"),url(/static/roboto-latin-700italic-81f57861ed4ac74741f5671e1dff2fd9.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:900;src:local("Roboto Black "),local("Roboto-Black"),url(/static/roboto-latin-900-9b3766ef4a402ad3fdeef7501a456512.woff2) format("woff2"),url(/static/roboto-latin-900-bb1e4dc6333675d11ada2e857e7f95d7.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:900;src:local("Roboto Black italic"),local("Roboto-Blackitalic"),url(/static/roboto-latin-900italic-ebf6d1640ccddb99fb49f73c052c55a8.woff2) format("woff2"),url(/static/roboto-latin-900italic-28f9151055c950874d2c6803a39b425b.woff) format("woff")}</style><meta name="generator" content="Gatsby 2.32.12"/><title data-rh="true"></title><link rel="sitemap" type="application/xml" href="/sitemap.xml"/><link rel="icon" href="/favicon-32x32.png?v=4a9773549091c227cd2eb82ccd9c5e3a" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><meta name="theme-color" content="#0046AA"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link as="script" rel="preload" href="/webpack-runtime-b44bd1f73f3dadec382a.js"/><link as="script" rel="preload" href="/framework-7279ed8cf8a3147fdee1.js"/><link as="script" rel="preload" href="/styles-6ef77b19c5865df89971.js"/><link as="script" rel="preload" href="/0a301732-396e6eb0413bfce7aa5e.js"/><link as="script" rel="preload" href="/commons-de9228f446c306705cf3.js"/><link as="script" rel="preload" href="/app-d8046721bd0f43897453.js"/><link as="script" rel="preload" href="/component---src-pages-typography-index-js-b3ad68196901f1a886ad.js"/>
1<link as="fetch" rel="preload" href="/page-data/typography/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/1167351842.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><style data-emotion-css="ejd7dx">body{margin:0;font-family:'Roboto',sans-serif;font-size:16px;line-height:24px;color:#000000;}a{color:inherit;-webkit-text-decoration:none;text-decoration:none;}:focus{outline:0;}[data-basis-keyboard-mode="true"] :not([aria-invalid="true"]):focus{box-shadow:0 0 0px 4px #82c6ff;}</style><style data-emotion-css="1jp9c0i">.css-1jp9c0i{height:100vh;display:grid;grid-template-columns:224px 1fr;}</style><div class="css-1jp9c0i"><style data-emotion-css="1s7ezcy">.css-1s7ezcy{min-height:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style><header class="css-1s7ezcy"><style data-emotion-css="f4rfaz">.css-f4rfaz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e5e5e5;background-color:#f2f2f2;}</style><div class="css-f4rfaz"><style data-emotion-css="td18sz">.css-td18sz{font-family:'Montserrat',sans-serif;font-weight:600;font-size:20px;line-height:24px;-webkit-letter-spacing:-0.44px;-moz-letter-spacing:-0.44px;-ms-letter-spacing:-0.44px;letter-spacing:-0.44px;}</style><a class="css-td18sz" href="/">Basis</a><style data-emotion-css="11okp28">.css-11okp28{display:inline-block;-webkit-text-decoration:none;text-decoration:none;border-radius:1px;outline:0;font-family:inherit;font-weight:inherit;color:inherit;border-bottom-color:inherit;vertical-align:top;}[data-basis-keyboard-mode="true"] .css-11okp28:focus{box-shadow:0 0 0px 4px #82c6ff;position:relative;z-index:1;}.css-11okp28:hover,.css-11okp28:active{color:inherit;border-bottom-color:inherit;}</style><a href="https://github.com/LatitudeFinancialOSS/basis" title="GitHub" target="_blank" rel="noreferrer" class="css-11okp28"><span class="css-11okp28"><style data-emotion-css="16gjfra">.css-16gjfra{display:block;fill:#414141;-webkit-transition:fill 200ms ease-out;transition:fill 200ms ease-out;}.css-16gjfra:hover{fill:#000000;}</style><svg width="32px" height="32px" viewBox="0 0 32 32" focusable="false" role="img" class="css-16gjfra"><path d="M15.846 4C9.304 4 4 9.148 4 15.5c0 5.08 3.394 9.388 8.102 10.91.593.105.809-.25.809-.555 0-.273-.01-.996-.016-1.955-3.295.694-3.99-1.542-3.99-1.542-.54-1.329-1.316-1.682-1.316-1.682-1.076-.713.081-.7.081-.7 1.19.083 1.815 1.186 1.815 1.186 1.057 1.757 2.772 1.25 3.448.956.107-.743.413-1.25.752-1.538-2.63-.29-5.397-1.276-5.397-5.683 0-1.255.462-2.281 1.22-3.085-.122-.29-.529-1.46.116-3.043 0 0 .995-.31 3.258 1.179a11.67 11.67 0 012.966-.388c1.006.005 2.02.132 2.966.388 2.261-1.488 3.254-1.18 3.254-1.18.647 1.584.24 2.753.118 3.044.76.804 1.218 1.83 1.218 3.085 0 4.418-2.77 5.39-5.41 5.674.426.355.805 1.057.805 2.13 0 1.537-.015 2.777-.015 3.154 0 .308.214.665.815.553 4.703-1.524 8.095-5.83 8.095-10.908C27.694 9.148 22.39 4 15.846 4" fill-rule="evenodd"></path></svg></span></a></div><style data-emotion-css="yazu3y">.css-yazu3y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;background-color:#f2f2f2;}</style><div class="css-yazu3y"><style data-emotion-css="dbjef7">.css-dbjef7{box-sizing:border-box;margin:20px 0px 16px;max-width:initial;background-color:transparent;}</style><div class="css-dbjef7"><style data-emotion-css="1l95nvm">.css-1l95nvm{margin:0;padding:0;}</style><ul class="css-1l95nvm"><style data-emotion-css="155za0w">.css-155za0w{list-style-type:none;}</style><li class="css-155za0w"><style data-emotion-css="a07d6f">.css-a07d6f{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;padding:8px 24px;color:#414141;}.css-a07d6f:hover{background-color:#d6d6d6;}</style><a class="css-a07d6f" href="/playground">Playground</a></li></ul></div><div class="css-dbjef7"><style data-emotion-css="1a950m9">.css-1a950m9{margin:0px 24px 8px;color:#414141;text-align:inherit;font-family:'Roboto',sans-serif;font-weight:300;font-size:16px;line-height:24px;-webkit-letter-spacing:0px;-moz-letter-spacing:0px;-ms-letter-spacing:0px;letter-spacing:0px;}.css-1a950m9 strong{font-weight:500;}.css-1a950m9 b{font-weight:500;}</style><p class="css-1a950m9"><strong>FOUNDATION</strong></p><ul class="css-1l95nvm"><li class="css-155za0w"><style data-emotion-css="dflr27">
1.css-dflr27{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;padding:8px 24px;color:#000000;background-color:#d6d6d6;font-weight:500;}.css-dflr27:hover{background-color:#d6d6d6;}</style><a class="css-dflr27" href="/typography">Typography</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/spacing">Spacing</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/colors">Colors</a></li></ul></div><div class="css-dbjef7"><p class="css-1a950m9"><strong>COMPONENTS</strong></p><ul class="css-1l95nvm"><li class="css-155za0w"><a class="css-a07d6f" href="/components/accordion">Accordion</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/button">Button</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/checkbox">Checkbox</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/checkbox-group">CheckboxGroup</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/container">Container</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/date-picker">DatePicker</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/divider">Divider</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/dropdown">Dropdown</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/flex">Flex</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/footer">Footer</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/form">Form</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/frequency">Frequency</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/grid">Grid</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/header">Header</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/icon">Icon</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/input">Input</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/link">Link</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/list">List</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/loading-icon">LoadingIcon</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/message">Message</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/placeholder">Placeholder</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/radio-group">RadioGroup</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/select">Select</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/shadow-container">ShadowContainer</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/stack">Stack</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/stepper">Stepper</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/sticky">Sticky</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/text">Text</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/textarea">Textarea</a></li><li class="css-155za0w"><a class="css-a07d6f" href="/components/time-span">TimeSpan</a></li></ul></div><style data-emotion-css="1mkqaxq">.css-1mkqaxq{margin-top:auto;padding:16px 24px;font-size:10px;color:#595959;border-top:1px solid #e5e5e5;}</style><div class="css-1mkqaxq">Version <!-- -->1.70.0</div></div></header><style data-emotion-css="1y5mcau">.css-1y5mcau{min-height:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:auto;}</style><main class="css-1y5mcau"><style data-emotion-css="1r05isf">.css-1r05isf{border-bottom:1px solid #d6d6d6;}</style><div class="css-1r05isf"><style data-emotion-css="jx317d">.css-jx317d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:20px 24px 0;}</style><div class="css-jx317d"><style data-emotion-css="5p5bvu">.css-5p5bvu{margin:0;color:#000000;text-align:inherit;font-family:'Montserrat',sans-serif;font-weight:600;font-size:24px;line-height:28px;-webkit-letter-spacing:-0.52px;-moz-letter-spacing:-0.52px;-ms-letter-spacing:-0.52px;letter-spacing:-0.52px;}.css-5p5bvu strong{font-weight:600;}.css-5p5bvu b{font-weight:600;}</style><h1 class="css-5p5bvu">Typography</h1><style data-emotion-css="zdpt2t">.css-zdpt2t{margin-left:auto;}</style><div data-feedback-fish="true" class="css-zdpt2t"><style data-emotion-css="lhm5ve">.css-lhm5ve{font-size:14px;line-height:20px;font-family:'Roboto',sans-serif;font-weight:500;border-radius:4px;margin:0;padding:0 16px;min-height:32px;overflow:hidden;-webkit-transition:-webkit-transform 100ms ease,color 100ms ease,border-color 100ms ease;-webkit-transition:transform 100ms ease,color 100ms ease,border-color 100ms ease;transition:transform 100ms ease,color 100ms ease,border-color 100ms ease;color:#595959;background-color:transparent;border-width:1px;border-style:solid;border-color:#b2b2b2;}.css-lhm5ve:disabled{opacity:0.4;cursor:not-allowed;}.css-lhm5ve:hover:not(:disabled){color:#000000;border-color:#000000;}.css-lhm5ve:active:not(:disabled){color:#000000;border-color:#000000;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}</style><button type="button" class="css-lhm5ve"><span class="css-0">Feedback</span></button></div></div><style data-emotion-css="1lb97vc">.css-1lb97vc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:24px 0 0;padding:0;}</style><ul class="css-1lb97vc"><style data-emotion-css="r2f0h5">.css-r2f0h5{list-style-type:none;color:#000000;}.css-r2f0h5::after{content:'';display:block;height:2px;margin:0 24px;background-color:#000000;}</style><li class="css-r2f0h5"><style data-emotion-css="ivelgo">.css-ivelgo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;padding:8px 24px;color:#000000;}</style><a class="css-ivelgo" href="/typography">Overview</a></li><style data-emotion-css="1oc9nl">.css-1oc9nl{list-style-type:none;color:#595959;}</style><li class="css-1oc9nl"><style data-emotion-css="1v4o9bs">
1.css-1v4o9bs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;padding:8px 24px;color:#414141;}</style><a class="css-1v4o9bs" href="/typography/usage">Usage</a></li></ul></div><style data-emotion-css="c1wbwx">.css-c1wbwx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-height:0;overflow-y:auto;}</style><div class="css-c1wbwx"><style data-emotion-css="8fzr4d">.css-8fzr4d{box-sizing:border-box;padding:24px;max-width:initial;margin-left:initial;margin-right:initial;background-color:transparent;}</style><div class="css-8fzr4d"><style data-emotion-css="j8v08s">.css-j8v08s{display:grid;grid-template-columns:140px 320px 140px 220px 120px 120px 140px 160px;grid-column-gap:0px;grid-row-gap:0px;}</style><div class="css-j8v08s"><style data-emotion-css="y3zq7u">.css-y3zq7u{padding-bottom:8px;border-bottom:2px solid #b2b2b2;}</style><div class="css-y3zq7u"><style data-emotion-css="gtlc17">.css-gtlc17{margin:0;color:#000000;text-align:inherit;font-family:'Roboto',sans-serif;font-weight:300;font-size:18px;line-height:28px;-webkit-letter-spacing:0px;-moz-letter-spacing:0px;-ms-letter-spacing:0px;letter-spacing:0px;}.css-gtlc17 strong{font-weight:500;}.css-gtlc17 b{font-weight:500;}</style><p class="css-gtlc17"><b>Text Style</b></p></div><div class="css-y3zq7u"><p class="css-gtlc17"><b>Example</b></p></div><div class="css-y3zq7u"><p class="css-gtlc17"><b>Font Family</b></p></div><div class="css-y3zq7u"><p class="css-gtlc17"><b>Font Weight</b></p></div><div class="css-y3zq7u"><p class="css-gtlc17"><b>Case</b></p></div><div class="css-y3zq7u"><p class="css-gtlc17"><b>Font Size</b></p></div><div class="css-y3zq7u"><p class="css-gtlc17"><b>Line Height</b></p></div><div class="css-y3zq7u"><p class="css-gtlc17"><b>Letter Spacing</b></p></div><style data-emotion-css="1gw2ts9">.css-1gw2ts9{padding:12px 0;border-bottom:1px solid #d6d6d6;}</style><div class="css-1gw2ts9"><style data-emotion-css="ab8yd1">.css-ab8yd1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;}</style><div class="css-ab8yd1"><style data-emotion-css="og9sod">.css-og9sod{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}</style><div class="css-og9sod"><style data-emotion-css="1ncb44">.css-1ncb44{margin:0;color:#000000;text-align:inherit;font-family:'Roboto',sans-serif;font-weight:300;font-size:16px;line-height:24px;-webkit-letter-spacing:0px;-moz-letter-spacing:0px;-ms-letter-spacing:0px;letter-spacing:0px;}.css-1ncb44 strong{font-weight:500;}.css-1ncb44 b{font-weight:500;}</style><p class="css-1ncb44">hero</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="cibxqu">.css-cibxqu{margin:0;color:#000000;text-align:inherit;font-family:'Montserrat',sans-serif;font-weight:600;font-size:104px;line-height:120px;-webkit-letter-spacing:-2.28px;-moz-letter-spacing:-2.28px;-ms-letter-spacing:-2.28px;letter-spacing:-2.28px;}.css-cibxqu strong{font-weight:600;}.css-cibxqu b{font-weight:600;}</style><p class="css-cibxqu">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Montserrat</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Semi-bold 600</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">104px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">120px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">-2.28px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">heading1</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="kitm9q">.css-kitm9q{margin:0;color:#000000;text-align:inherit;font-family:'Montserrat',sans-serif;font-weight:600;font-size:48px;line-height:56px;-webkit-letter-spacing:-1.05px;-moz-letter-spacing:-1.05px;-ms-letter-spacing:-1.05px;letter-spacing:-1.05px;}.css-kitm9q strong{font-weight:600;}.css-kitm9q b{font-weight:600;}</style><p class="css-kitm9q">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Montserrat</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Semi-bold 600</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">48px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">56px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">-1.05px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">heading2</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="155serd">.css-155serd{margin:0;color:#000000;text-align:inherit;font-family:'Montserrat',sans-serif;font-weight:600;font-size:40px;line-height:48px;-webkit-letter-spacing:-0.88px;-moz-letter-spacing:-0.88px;-ms-letter-spacing:-0.88px;letter-spacing:-0.88px;}.css-155serd strong{font-weight:600;}.css-155serd b{font-weight:600;}</style><p class="css-155serd">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Montserrat</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Semi-bold 600</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">40px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">48px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">-0.88px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">heading3</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="1dz7cq7">.css-1dz7cq7{margin:0;color:#000000;text-align:inherit;font-family:'Montserrat',sans-serif;font-weight:600;font-size:32px;line-height:36px;-webkit-letter-spacing:-0.7px;-moz-letter-spacing:-0.7px;-ms-letter-spacing:-0.7px;letter-spacing:-0.7px;}.css-1dz7cq7 strong{font-weight:600;}.css-1dz7cq7 b{font-weight:600;}</style><p class="css-1dz7cq7">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Montserrat</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Semi-bold 600</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">32px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">36px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">-0.7px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">heading4</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-5p5bvu">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Montserrat</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Semi-bold 600</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">24px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">28px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">-0.52px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">heading5</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="1vhstak">.css-1vhstak{margin:0;color:#000000;text-align:inherit;font-family:'Montserrat',sans-serif;font-weight:600;font-size:20px;line-height:24px;-webkit-letter-spacing:-0.44px;-moz-letter-spacing:-0.44px;-ms-letter-spacing:-0.44px;letter-spacing:-0.44px;}.css-1vhstak strong{font-weight:600;}.css-1vhstak b{font-weight:600;}</style><p class="css-1vhstak">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Montserrat</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Semi-bold 600</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">20px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">24px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">-0.44px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">heading6</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="1eqtjdc">.css-1eqtjdc{margin:0;color:#000000;text-align:inherit;font-family:'Montserrat',sans-serif;font-weight:600;font-size:16px;line-height:22px;-webkit-letter-spacing:-0.35px;-moz-letter-spacing:-0.35px;-ms-letter-spacing:-0.35px;letter-spacing:-0.35px;}.css-1eqtjdc strong{font-weight:600;}.css-1eqtjdc b{font-weight:600;}</style><p class="css-1eqtjdc">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Montserrat</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Semi-bold 600</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">16px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">22px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">-0.35px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">subtitle1</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="ch990n">.css-ch990n{margin:0;color:#000000;text-align:inherit;font-family:'Roboto',sans-serif;font-weight:300;font-size:24px;line-height:36px;-webkit-letter-spacing:0px;-moz-letter-spacing:0px;-ms-letter-spacing:0px;letter-spacing:0px;}.css-ch990n strong{font-weight:500;}.css-ch990n b{font-weight:500;}</style><p class="css-ch990n">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Roboto</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Light 300 / Medium 500</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">24px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">36px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">0px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">subtitle2</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-gtlc17">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Roboto</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Light 300 / Medium 500</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">18px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">28px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">0px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">body1</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Roboto</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Light 300 / Medium 500</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">16px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">24px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">0px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">body2</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="u0x6ie">.css-u0x6ie{margin:0;color:#000000;text-align:inherit;font-family:'Roboto',sans-serif;font-weight:300;font-size:14px;line-height:20px;-webkit-letter-spacing:0px;-moz-letter-spacing:0px;-ms-letter-spacing:0px;letter-spacing:0px;}.css-u0x6ie strong{font-weight:500;}.css-u0x6ie b{font-weight:500;}</style><p class="css-u0x6ie">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Roboto</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Light 300 / Medium 500</p></div></div></div><div class="css-1gw2ts9"><div
1 class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">14px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">20px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">0px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">legal</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="1wz0514">.css-1wz0514{margin:0;color:#000000;text-align:inherit;font-family:'Roboto',sans-serif;font-weight:300;font-size:14px;line-height:24px;-webkit-letter-spacing:0px;-moz-letter-spacing:0px;-ms-letter-spacing:0px;letter-spacing:0px;}.css-1wz0514 strong{font-weight:500;}.css-1wz0514 b{font-weight:500;}</style><p class="css-1wz0514">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Roboto</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Light 300 / Medium 500</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Sentence</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">14px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">24px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">0px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">overline</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><style data-emotion-css="fgbwnv">.css-fgbwnv{margin:0;color:#000000;text-align:inherit;font-family:'Roboto',sans-serif;font-weight:700;font-size:14px;line-height:20px;-webkit-letter-spacing:2.6px;-moz-letter-spacing:2.6px;-ms-letter-spacing:2.6px;letter-spacing:2.6px;text-transform:uppercase;}.css-fgbwnv strong{font-weight:700;}.css-fgbwnv b{font-weight:700;}</style><p class="css-fgbwnv">Hello</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Roboto</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Bold 700</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">Uppercase</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">14px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">20px</p></div></div></div><div class="css-1gw2ts9"><div class="css-ab8yd1"><div class="css-og9sod"><p class="css-1ncb44">2.6px</p></div></div></div></div></div></div></main></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div>
1<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/typography/";/*]]>*/</script>
1<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-be56b2f7084b25b7ac7f.js"],"app":["/app-d8046721bd0f43897453.js"],"component---src-pages-404-js":["/component---src-pages-404-js-410bcef98a98c2a15982.js"],"component---src-pages-colors-accessibility-js":["/component---src-pages-colors-accessibility-js-95e61f6834be91e90997.js"],"component---src-pages-colors-index-js":["/component---src-pages-colors-index-js-182bc579206762944fe7.js"],"component---src-pages-colors-resources-mdx":["/component---src-pages-colors-resources-mdx-a8c361b61b37f7c4f209.js"],"component---src-pages-components-accordion-index-js":["/component---src-pages-components-accordion-index-js-a96253d39e2edd6908e8.js"],"component---src-pages-components-accordion-resources-mdx":["/component---src-pages-components-accordion-resources-mdx-9b6271b539afd43f969b.js"],"component---src-pages-components-accordion-usage-mdx":["/component---src-pages-components-accordion-usage-mdx-231ed18032d6bdd547d5.js"],"component---src-pages-components-button-index-js":["/component---src-pages-components-button-index-js-fa796a4fb6426097ab7a.js"],"component---src-pages-components-button-resources-mdx":["/component---src-pages-components-button-resources-mdx-78ec407e455863729d77.js"],"component---src-pages-components-button-usage-mdx":["/component---src-pages-components-button-usage-mdx-8065d782138aabd85408.js"],"component---src-pages-components-checkbox-group-index-js":["/component---src-pages-components-checkbox-group-index-js-7f9e970f056ad5908ff1.js"],"component---src-pages-components-checkbox-group-resources-mdx":["/component---src-pages-components-checkbox-group-resources-mdx-978a63777dd45d15dcdb.js"],"component---src-pages-components-checkbox-group-usage-mdx":["/component---src-pages-components-checkbox-group-usage-mdx-d4e72730c1ace308d2e5.js"],"component---src-pages-components-checkbox-index-js":["/component---src-pages-components-checkbox-index-js-f516ec8b0577ffd61f43.js"],"component---src-pages-components-checkbox-resources-mdx":["/component---src-pages-components-checkbox-resources-mdx-4adaa41b800d9cebe6ac.js"],"component---src-pages-components-checkbox-usage-mdx":["/component---src-pages-components-checkbox-usage-mdx-9256dd6da23e3bcce9d8.js"],"component---src-pages-components-container-index-js":["/component---src-pages-components-container-index-js-788487ddf45f8978d7b8.js"],"component---src-pages-components-container-resources-mdx":["/component---src-pages-components-container-resources-mdx-fcbeffb7697b34fea0e9.js"],"component---src-pages-components-container-usage-mdx":["/component---src-pages-components-container-usage-mdx-b558b483657375072609.js"],"component---src-pages-components-date-picker-index-js":["/component---src-pages-components-date-picker-index-js-ca65d0c0c60849a43ce6.js"],"component---src-pages-components-date-picker-resources-mdx":["/component---src-pages-components-date-picker-resources-mdx-d74ecb72fe418d30af17.js"],"component---src-pages-components-date-picker-usage-mdx":["/component---src-pages-components-date-picker-usage-mdx-01216e328d116b73c4c9.js"],"component---src-pages-components-divider-index-js":["/component---src-pages-components-divider-index-js-ef6b874e960a02ece46c.js"],"component---src-pages-components-divider-resources-mdx":["/component---src-pages-components-divider-resources-mdx-674a86a829ce7022d4a3.js"],"component---src-pages-components-divider-usage-mdx":["/component---src-pages-components-divider-usage-mdx-eec8019a6bfdc372eebb.js"],"component---src-pages-components-dropdown-index-js":["/component---src-pages-components-dropdown-index-js-59ffc3bd4639d1250149.js"],"component---src-pages-components-dropdown-resources-mdx":["/component---src-pages-components-dropdown-resources-mdx-9b0fa658d6bad363093b.js"],"component---src-pages-components-dropdown-usage-mdx":["/component---src-pages-components-dropdown-usage-mdx-5f371d02d97c4968cf09.js"],"component---src-pages-components-flex-index-js":["/component---src-pages-components-flex-index-js-52a76b9537db26970a47.js"],"component---src-pages-components-flex-resources-mdx":["/component---src-pages-components-flex-resources-mdx-22dbe9bf12bc4cf154fa.js"],"component---src-pages-components-flex-usage-mdx":["/component---src-pages-components-flex-usage-mdx-6a42a0878ee6cbba55ea.js"],"component---src-pages-components-footer-index-js":["/component---src-pages-components-footer-index-js-99022da4403c703ab61e.js"],"component---src-pages-components-footer-resources-mdx":["/component---src-pages-components-footer-resources-mdx-636ae06f7fc1d5013048.js"],"component---src-pages-components-footer-usage-mdx":["/component---src-pages-components-footer-usage-mdx-7d66a761eee717703417.js"],"component---src-pages-components-form-index-js":["/component---src-pages-components-form-index-js-3cd517161987a7027fe0.js"],"component---src-pages-components-form-resources-mdx":["/component---src-pages-components-form-resources-mdx-ed991e591bf25332d59d.js"],"component---src-pages-components-form-usage-mdx":["/component---src-pages-components-form-usage-mdx-a132633a640d93bd4bd2.js"],"component---src-pages-components-frequency-index-js":["/component---src-pages-components-frequency-index-js-2e27fbc57052e194a83e.js"],"component---src-pages-components-frequency-resources-mdx":["/component---src-pages-components-frequency-resources-mdx-954e1e2e9a22765f75c5.js"],"component---src-pages-components-frequency-usage-mdx":["/component---src-pages-components-frequency-usage-mdx-0c10bb44aec41cae0477.js"],"component---src-pages-components-grid-index-js":["/component---src-pages-components-grid-index-js-d9061b4871f03d4c3192.js"],"component---src-pages-components-grid-resources-mdx":["/component---src-pages-components-grid-resources-mdx-1c503a91afb09469a9d2.js"],"component---src-pages-components-grid-usage-mdx":["/component---src-pages-components-grid-usage-mdx-b76fdbdac25a0c29beab.js"],"component---src-pages-components-header-index-js":["/component---src-pages-components-header-index-js-42d62ac980d242462418.js"],"component---src-pages-components-header-resources-mdx":["/component---src-pages-components-header-resources-mdx-fd07ad5fd51c00bcf2c9.js"],"component---src-pages-components-header-usage-mdx":["/component---src-pages-components-header-usage-mdx-bc3390730f8f8d5302d9.js"],"component---src-pages-components-icon-index-js":["/component---src-pages-components-icon-index-js-74e25790d9b41348a74c.js"],"component---src-pages-components-icon-resources-mdx":["/component---src-pages-components-icon-resources-mdx-62fe77c516b3560ae217.js"],"component---src-pages-components-icon-usage-mdx":["/component---src-pages-components-icon-usage-mdx-1c17ab6926bde5302ba9.js"],"component---src-pages-components-input-index-js":["/component---src-pages-components-input-index-js-97c12214c2e2a9e9ca82.js"],"component---src-pages-components-input-resources-mdx":["/component---src-pages-components-input-resources-mdx-9e2d8c8bd84b0c7ef89e.js"],"component---src-pages-components-input-usage-mdx":["/component---src-pages-components-input-usage-mdx-75af96a674e31d93185c.js"],"component---src-pages-components-link-index-js":["/component---src-pages-components-link-index-js-f9722dce39b9054811c3.js"],"component---src-pages-components-link-resources-mdx":["/component---src-pages-components-link-resources-mdx-5a79aee5b24fdefdb7b1.js"],"component---src-pages-components-link-usage-mdx":["/component---src-pages-components-link-usage-mdx-145b3acb11d56f18c292.js"],"component---src-pages-components-list-index-js":["/component---src-pages-components-list-index-js-e31c4591b28
16f3761cb1.js"],"component---src-pages-components-list-resources-mdx":["/component---src-pages-components-list-resources-mdx-e39278072570885be138.js"],"component---src-pages-components-list-usage-mdx":["/component---src-pages-components-list-usage-mdx-a7cd40b3694dcddd03c8.js"],"component---src-pages-components-loading-icon-index-js":["/component---src-pages-components-loading-icon-index-js-2d5aa9dea05c4cc77e95.js"],"component---src-pages-components-loading-icon-resources-mdx":["/component---src-pages-components-loading-icon-resources-mdx-e4e510861a0d25d2f517.js"],"component---src-pages-components-loading-icon-usage-mdx":["/component---src-pages-components-loading-icon-usage-mdx-263e5cd353bd89d2fd28.js"],"component---src-pages-components-message-index-js":["/component---src-pages-components-message-index-js-ffc46312abc9ce60ec2f.js"],"component---src-pages-components-message-resources-mdx":["/component---src-pages-components-message-resources-mdx-02d6f2ea3e0b75657914.js"],"component---src-pages-components-message-usage-mdx":["/component---src-pages-components-message-usage-mdx-c4e4ec4152ea785dc92c.js"],"component---src-pages-components-placeholder-index-js":["/component---src-pages-components-placeholder-index-js-a1497562a0c226a82e55.js"],"component---src-pages-components-placeholder-resources-mdx":["/component---src-pages-components-placeholder-resources-mdx-a7d9e955f092f47e748b.js"],"component---src-pages-components-placeholder-usage-mdx":["/component---src-pages-components-placeholder-usage-mdx-12ad9b5214911bcd9e2e.js"],"component---src-pages-components-radio-group-index-js":["/component---src-pages-components-radio-group-index-js-5e0e7482e5b966dbfa14.js"],"component---src-pages-components-radio-group-resources-mdx":["/component---src-pages-components-radio-group-resources-mdx-fecbd9251030c0a3fcdf.js"],"component---src-pages-components-radio-group-usage-mdx":["/component---src-pages-components-radio-group-usage-mdx-0c3e6cc036e2b9b3e049.js"],"component---src-pages-components-select-index-js":["/component---src-pages-components-select-index-js-48fd060fd06b755e9042.js"],"component---src-pages-components-select-resources-mdx":["/component---src-pages-components-select-resources-mdx-ea2c5db6ca0a9307f91b.js"],"component---src-pages-components-select-usage-mdx":["/component---src-pages-components-select-usage-mdx-a4e28487289044b7e499.js"],"component---src-pages-components-shadow-container-index-js":["/component---src-pages-components-shadow-container-index-js-1258bd98c0e4a55f1542.js"],"component---src-pages-components-shadow-container-resources-mdx":["/component---src-pages-components-shadow-container-resources-mdx-4c4dd977fbfbd144f8b0.js"],"component---src-pages-components-shadow-container-usage-mdx":["/component---src-pages-components-shadow-container-usage-mdx-ba06475805c902cac9b0.js"],"component---src-pages-components-stack-index-js":["/component---src-pages-components-stack-index-js-7b6678cf4717000f2d3b.js"],"component---src-pages-components-stack-resources-mdx":["/component---src-pages-components-stack-resources-mdx-31d472c66f8f007bcb26.js"],"component---src-pages-components-stack-usage-mdx":["/component---src-pages-components-stack-usage-mdx-6d67b4426dcdf4c26b31.js"],"component---src-pages-components-stepper-index-js":["/component---src-pages-components-stepper-index-js-6f6044790812b2864d3a.js"],"component---src-pages-components-stepper-resources-mdx":["/component---src-pages-components-stepper-resources-mdx-9b325c76dfe6e5b431a4.js"],"component---src-pages-components-stepper-usage-mdx":["/component---src-pages-components-stepper-usage-mdx-635b0ec3f673862e5be8.js"],"component---src-pages-components-sticky-index-js":["/component---src-pages-components-sticky-index-js-474937ff7954f0715b3c.js"],"component---src-pages-components-sticky-resources-mdx":["/component---src-pages-components-sticky-resources-mdx-5f95a925e9a620d2f574.js"],"component---src-pages-components-sticky-usage-mdx":["/component---src-pages-components-sticky-usage-mdx-ccca1d42e8d6dae7d8b8.js"],"component---src-pages-components-text-index-js":["/component---src-pages-components-text-index-js-6b23d894ed0560b9abfc.js"],"component---src-pages-components-text-resources-mdx":["/component---src-pages-components-text-resources-mdx-587a5610f58c7d4a31ec.js"],"component---src-pages-components-text-us
1age-mdx":["/component---src-pages-components-text-usage-mdx-dc65147c951355400c9c.js"],"component---src-pages-components-textarea-index-js":["/component---src-pages-components-textarea-index-js-123c78131c87d21d4161.js"],"component---src-pages-components-textarea-resources-mdx":["/component---src-pages-components-textarea-resources-mdx-73f25f273fe08685da07.js"],"component---src-pages-components-textarea-usage-mdx":["/component---src-pages-components-textarea-usage-mdx-9c5344e0a3f74bf77e07.js"],"component---src-pages-components-time-span-index-js":["/component---src-pages-components-time-span-index-js-07f90c71ef0733711a3d.js"],"component---src-pages-components-time-span-resources-mdx":["/component---src-pages-components-time-span-resources-mdx-6f9579256a6baa4a2159.js"],"component---src-pages-components-time-span-usage-mdx":["/component---src-pages-components-time-span-usage-mdx-05b54a5f3be44a3ff67a.js"],"component---src-pages-index-js":["/component---src-pages-index-js-0b8a4a2b4cee8dae2d57.js"],"component---src-pages-kitchen-sink-components-accordion-js":["/component---src-pages-kitchen-sink-components-accordion-js-6b640c66f156d784f056.js"],"component---src-pages-kitchen-sink-components-button-js":["/component---src-pages-kitchen-sink-components-button-js-e2b3c6e6e93535e07fca.js"],"component---src-pages-kitchen-sink-components-checkbox-group-js":["/component---src-pages-kitchen-sink-components-checkbox-group-js-e6968b854dd0faef2ffe.js"],"component---src-pages-kitchen-sink-components-checkbox-js":["/component---src-pages-kitchen-sink-components-checkbox-js-97fafb2461855569784a.js"],"component---src-pages-kitchen-sink-components-container-js":["/component---src-pages-kitchen-sink-components-container-js-406f6adbebda13ff65d7.js"],"component---src-pages-kitchen-sink-components-date-picker-js":["/component---src-pages-kitchen-sink-components-date-picker-js-22a1a667953c9a527dfc.js"],"component---src-pages-kitchen-sink-components-divider-js":["/component---src-pages-kitchen-sink-components-divider-js-af5342de4e9379176834.js"],"component---src-pages-kitchen-sink-components-dropdown-js":["/component---src-pages-kitchen-sink-components-dropdown-js-1cb90920f4cd3a58476a.js"],"component---src-pages-kitchen-sink-components-flex-js":["/component---src-pages-kitchen-sink-components-flex-js-77cf6829d17cdf8c6957.js"],"component---src-pages-kitchen-sink-components-footer-js":["/component---src-pages-kitchen-sink-components-footer-js-0f64e2421ba41ec1e47f.js"],"component---src-pages-kitchen-sink-components-frequency-js":["/component---src-pages-kitchen-sink-components-frequency-js-8536b5241662243b5510.js"],"component---src-pages-kitchen-sink-components-grid-js":["/component---src-pages-kitchen-sink-components-grid-js-1357f1b0728897e46aa7.js"],"component---src-pages-kitchen-sink-components-header-js":["/component---src-pages-kitchen-sink-components-header-js-6d6c92efc56fe8cc7420.js"],"component---src-pages-kitchen-sink-components-input-js":["/component---src-pages-kitchen-sink-components-input-js-f0b302022a7a0afb9fd0.js"],"component---src-pages-kitchen-sink-components-link-js":["/component---src-pages-kitchen-sink-components-link-js-877aaf4d29f614785ec4.js"],"component---src-pages-kitchen-sink-components-list-js":["/component---src-pages-kitchen-sink-components-list-js-5b0dd5475cc64d015bf8.js"],"component---src-pages-kitchen-sink-components-message-js":["/component---src-pages-kitchen-sink-components-message-js-eb571e0ed4fad0939add.js"],"component---src-pages-kitchen-sink-components-placeholder-js":["/component---src-pages-kitchen-sink-components-placeholder-js-1064c14bc4dbe6320cad.js"],"component---src-pages-kitchen-sink-components-radio-group-js":["/component---src-pages-kitchen-sink-components-radio-group-js-33b00877a8b4f14557cf.js"],"component---src-pages-kitchen-sink-components-select-js":["/component---src-pages-kitchen-sink-components-select-js-e9b09d92ebf01a34ad04.js"],"component---src-pages-kitchen-sink-components-shadow-container-js":["/component---src-pages-kitchen-sink-components-shadow-container-js-db56313be8b503016c78.js"],"component---src-pages-kitchen-sink-components-stack-js":["/component---src-pages-kitchen-sink-components-stack-js-2b47bb5c94500c6f10
17d.js"],"component---src-pages-kitchen-sink-components-stepper-js":["/component---src-pages-kitchen-sink-components-stepper-js-49ca8846822261b21b6c.js"],"component---src-pages-kitchen-sink-components-sticky-js":["/component---src-pages-kitchen-sink-components-sticky-js-339a8469c48b9f7deaba.js"],"component---src-pages-kitchen-sink-components-text-js":["/component---src-pages-kitchen-sink-components-text-js-2946d5d7f1b04190502d.js"],"component---src-pages-kitchen-sink-components-textarea-js":["/component---src-pages-kitchen-sink-components-textarea-js-ecfe41c010f1941528fd.js"],"component---src-pages-kitchen-sink-components-time-span-js":["/component---src-pages-kitchen-sink-components-time-span-js-597da5dd62860e5156ee.js"],"component---src-pages-playground-index-js":["/component---src-pages-playground-index-js-51e4a8feff7688acf728.js"],"component---src-pages-preview-index-js":["/component---src-pages-preview-index-js-b63f4ed405c7169e8051.js"],"component---src-pages-spacing-index-js":["/component---src-pages-spacing-index-js-ec4fb013867b1d83846a.js"],"component---src-pages-spacing-usage-mdx":["/component---src-pages-spacing-usage-mdx-fcbad1ae2c516b5e4688.js"],"component---src-pages-typography-index-js":["/component---src-pages-typography-index-js-b3ad68196901f1a886ad.js"],"component---src-pages-typography-usage-mdx":["/component---src-pages-typography-usage-mdx-e1612971ce9f824d1006.js"]};/*]]>*/</script>
1<script src="/polyfill-be56b2f7084b25b7ac7f.js" nomodule=""></script>
1<script src="/component---src-pages-typography-index-js-b3ad68196901f1a886ad.js" async=""></script>
1<script src="/app-d8046721bd0f43897453.js" async=""></script>
1<script src="/commons-de9228f446c306705cf3.js" async=""></script>
1<script src="/0a301732-396e6eb0413bfce7aa5e.js" async=""></script>
1<script src="/styles-6ef77b19c5865df89971.js" async=""></script>
1<script src="/framework-7279ed8cf8a3147fdee1.js" async=""></script>
1<script src="/webpack-runtime-b44bd1f73f3dadec382a.js" async=""></script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.