1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="description" content="Typograpy components for react and styled-components"/><meta name="viewport" content="initial-scale=1.0,width=device-width,viewport-fit=cover"/><meta http-equiv="Accept-CH" content="Viewport-Width"/><meta name="theme-color" content="#ceeaeb"/><link rel="stylesheet" href="https://unpkg.com/a11y-css-reset@^1/combo.min.css"/><title>Styled Typography</title><noscript data-n-css="true"></noscript><link rel="preload" href="/_next/static/chunks/main-fc3c13f8023eda7f8ac9.js" as="script"/><link rel="preload" href="/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework.8b01aa1eaa051cce0319.js" as="script"/><link rel="preload" href="/_next/static/chunks/commons.4a1351f034b1f97b6b5a.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/_app-c5995fb5f2ae225ce29e.js" as="script"/><link rel="preload" href="/_next/static/chunks/02a4c0d08adb15a34219d1f02559f783b2308e00.6346eb0b5b006dbbd685.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/index-be00624b04422e8b540b.js" as="script"/><style data-styled="" data-styled-version="5.1.0">.cPrHdg{color:#0e425e;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:1.333rem;font-weight:500;font-style:normal;line-height:1.2;margin:1.5em 0 .5em 0;}/*!sc*/ 2.gzBcOC{color:#0e425e;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:2.369rem;font-weight:700;font-style:normal;line-height:1.2;margin:1.5em 0 .5em 0;}/*!sc*/ 3.csRlyK{color:#0e425e;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:1.777rem;font-weight:700;font-style:normal;line-height:1.2;margin:1.5em 0 .5em 0;}/*!sc*/ 4data-styled.g1[id="sc-AxjAm"]{content:"cPrHdg,gzBcOC,csRlyK,"}/*!sc*/ 5.fUkXu{color:#0e425e;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:1rem;font-weight:400;font-style:normal;line-height:1.4;}/*!sc*/ 6.iyUcQQ{color:#0e425e;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:1.777rem;font-weight:700;font-style:normal;line-height:1.4;}/*!sc*/ 7data-styled.g2[id="sc-AxirZ"]{content:"fUkXu,iyUcQQ,"}/*!sc*/ 8.jLpTsX{color:#0e425e;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:1rem;font-weight:400;font-style:normal;line-height:1.4;color:currentcolor;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;}/*!sc*/ 9.isVMNm{color:#0e425e;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:1rem;font-weight:700;font-style:normal;line-height:1.4;color:currentcolor;font-family:inherit;font-size:inherit;font-weight:700;font-style:inherit;line-height:inherit;}/*!sc*/ 10data-styled.g3[id="sc-AxiKw"]{content:"jLpTsX,isVMNm,"}/*!sc*/ 11.jACpTo{display:inline-block;color:currentcolor;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;}/*!sc*/ 12data-styled.g4[id="sc-AxhCb"]{content:"jACpTo,"}/*!sc*/ 13.kMWFDw{position:fixed;top:0;right:0;z-index:99999;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}/*!sc*/ 14.kMWFDw button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:0 0 0 4px;background:#b9d3d4;color:currentcolor;font-size:1rem;font-family:inherit;padding:4px 8px;}/*!sc*/ 15@media (hover){.kMWFDw button:hover{cursor:pointer;}}/*!sc*/ 16@media (min-width:768px){.kMWFDw button{padding:8px 16px;}}/*!sc*/ 17.kMWFDw div{margin-top:4px;background:#b9d3d4;width:240px;border-radius:4px 0 0 4px;box-shadow:0 2px 4px rgba(14,66,94,0.2);}/*!sc*/ 18.kMWFDw label{display:block;padding:8px 16px;margin:4px;border-radius:4px;border:4px solid transparent;}/*!sc*/ 19.kMWFDw label[data-active="true"]{border-color:#0e425e;}/*!sc*/ 20@media (hover){.kMWFDw label:hover{background-color:#a5bbbc;
20cursor:pointer;}}/*!sc*/ 21data-styled.g8[id="sc-1lvdgsa-0"]{content:"kMWFDw,"}/*!sc*/ 22.fmNMHM{padding:8px 24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}/*!sc*/ 23.fmNMHM .sc-AxjAm{margin:0;}/*!sc*/ 24.fmNMHM ul{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:top;-webkit-box-align:top;-ms-flex-align:top;align-items:top;margin:8px 0 0 0;}/*!sc*/ 25.fmNMHM li + li{margin-left:24px;}/*!sc*/ 26.fmNMHM [data-active="true"]{-webkit-text-decoration:line-through;text-decoration:line-through;}/*!sc*/ 27@media (hover){.fmNMHM .sc-AxhCb:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:wavy;text-decoration-style:wavy;}}/*!sc*/ 28@media (min-width:768px){.fmNMHM{padding:8px 48px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.fmNMHM ul{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:0 0 0 48px;}}/*!sc*/ 29data-styled.g9[id="sc-1yr2u8z-0"]{content:"fmNMHM,"}/*!sc*/ 30.jMBMyt:focus{width:unset;height:unset;margin:unset;padding:1em;-webkit-clip:unset;clip:unset;-webkit-clip-path:unset;clip-path:unset;z-index:999999;background:#ceeaeb;}/*!sc*/ 31data-styled.g10[id="sc-1xp22vn-0"]{content:"jMBMyt,"}/*!sc*/ 32.hZvepP{min-width:100vw;min-height:100vh;margin:0;padding:0;}/*!sc*/ 33.hZvepP .w921gf-0{position:relative;padding:0 24px 24px 24px;}/*!sc*/ 34@media (min-width:768px){.hZvepP .w921gf-0{padding:48px;}}/*!sc*/ 35data-styled.g12[id="w921gf-1"]{content:"hZvepP,"}/*!sc*/ 36.frqVQK{margin-top:80px;}/*!sc*/ 37data-styled.g13[id="sc-1gvbyca-0"]{content:"frqVQK,"}/*!sc*/ 38body{position:relative;background:#ceeaeb;}/*!sc*/ 39#__next{min-width:100vw;min-height:100vh;}/*!sc*/ 40section{max-width:40em;margin-left:auto;margin-right:auto;}/*!sc*/ 41code{background:#b9d3d4;padding:2px 4px;border-radius:4px;}/*!sc*/ 42pre{padding:16px;white-space:pre-wrap;border-radius:4px;font-size:14px;}/*!sc*/ 43ul{padding-left:1em;}/*!sc*/ 44.sc-AxjAm code,pre code{background:transparent;padding:initial;border-radius:0;}/*!sc*/ 45data-styled.g14[id="sc-global-dLDRAG1"]{content:"sc-global-dLDRAG1,"}/*!sc*/ 46body{color:#0e425e;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:1rem;font-weight:400;font-style:normal;line-height:1.4;}/*!sc*/ 47data-styled.g15[id="sc-global-hFLLEA1"]{content:"sc-global-hFLLEA1,"}/*!sc*/ 48</style></head><body><div id="__next"><a class="sc-AxhCb jACpTo sc-1xp22vn-0 jMBMyt visually-hidden" href="/#main-content">Skip to content</a><div class="w921gf-1 hZvepP"><header class="sc-1yr2u8z-0 fmNMHM"><div font-weight="500" role="heading" aria-level="1" class="sc-AxjAm cPrHdg">Styled Typography</div><nav><ul class="plain-list"><li><a data-active="true" href="/" class="sc-AxhCb jACpTo">Home</a></li><li><a data-active="false" href="/docs" class="sc-AxhCb jACpTo">Docs</a></li><li><a data-active="false" href="/faq" class="sc-AxhCb jACpTo">FAQ</a></li><li><a href="https://github.com/mike-engel/styled-typography" target="_blank" class="sc-AxhCb jACpTo">GitHub â</a></li></ul></nav><div class="sc-1lvdgsa-0 kMWFDw"><button aria-expanded="false" aria-controls="theme-menu">Change theme</button><div hidden="" id="theme-menu"><label data-active="true"><input type="radio" class="visually-hidden" checked="" name="theme" value="LIGHT"/><span class="sc-AxirZ sc-AxiKw jLpTsX">Light</span></label><label data-active="false"><input type="radio" class="visually-hidden" name="theme" value="DARK"/><span class="sc-AxirZ sc-AxiKw jLpTsX">Dark</span></label><label data-active="false"><input type="radio" class="visually-hidden" name="theme" value="SERIF"/><span class="sc-AxirZ sc-AxiKw jLpTsX">Serif</span></label><label data-active="false"><input type="radio" class="visually-hidden" name="theme" value="GOLDEN_RATIO"/><span class="sc-AxirZ sc-AxiKw jLpTsX">Golden Ratio</span></label><label data-active="false"><input type="radio" class="visually-hidden" name="theme" value="SPACEY"/><span class="sc-AxirZ sc-AxiKw jLpTsX">Spacey</span></label></div></div></header>
48<main id="main-content" class="w921gf-0 kCstqK"><section class="sc-1gvbyca-0 frqVQK"><div role="heading" aria-level="1" class="sc-AxjAm gzBcOC">Styled Typography</div><div font-weight="500" role="heading" aria-level="2" class="sc-AxjAm cPrHdg">Typograpy components for react and styled-components</div><p class="sc-AxirZ fUkXu"><span font-weight="700" class="sc-AxirZ sc-AxiKw isVMNm">styled-typography</span> is a small set of components using<!-- --> <a href="https://styled-components.com" target="_blank" class="sc-AxhCb jACpTo">styled-components</a>, to better manage typographic styles within your app. The API was born out of years of managing large single page applications and design systems.</p><p class="sc-AxirZ fUkXu">Itâs flexible to be used however you need and to be customized further, but simple enough to have a small API. Additionally, care has been taken to ensure accessibility when adding it to your apps.</p><div role="heading" aria-level="3" class="sc-AxjAm csRlyK">Getting started</div><pre style="color:#ccc;background:#2d2d2d;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto"><code style="color:#ccc;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token module" style="color:#cc99cd">import</span> <span class="token maybe-class-name">React</span> <span class="token module" style="color:#cc99cd">from</span> <span class="token" style="color:#7ec699">"react"</span><span class="token" style="color:#ccc">;</span> 49<span class="token module" style="color:#cc99cd">import</span> <span class="token" style="color:#ccc">{</span> <span class="token maybe-class-name">ThemeProvider</span> <span class="token" style="color:#ccc">}</span> <span class="token module" style="color:#cc99cd">from</span> <span class="token" style="color:#7ec699">"styled-components"</span><span class="token" style="color:#ccc">;</span> 50<span class="token module" style="color:#cc99cd">import</span> <span class="token" style="color:#ccc">{</span> <span class="token maybe-class-name">Heading</span><span class="token" style="color:#ccc">,</span> <span class="token maybe-class-name">Text</span><span class="token" style="color:#ccc">,</span> <span class="token maybe-class-name">Link</span> <span class="token" style="color:#ccc">}</span> <span class="token module" style="color:#cc99cd">from</span> <span class="token" style="color:#7ec699">"styled-typography"</span><span class="token" style="color:#ccc">;</span> 51 52<span class="token module" style="color:#cc99cd">export</span> <span class="token" style="color:#cc99cd">const</span> <span class="token function-variable" style="color:#f08d49"><span class="token maybe-class-name">App</span></span> <span class="token" style="color:#67cdcc">=</span> <span class="token" style="color:#ccc">(</span><span class="token parameter"><span class="token" style="color:#ccc">{</span> children <span class="token" style="color:#ccc">}</span></span><span class="token" style="color:#ccc">)</span> <span class="token arrow" style="color:#67cdcc">=></span> <span class="token" style="color:#ccc">(</span> 53 <span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"><</span><span class="token" style="color:#f8c555">ThemeProvider</span></span> <span class="token" style="color:#e2777a">theme</span><span class="token script language-javascript"><span class="token script-punctuation" style="color:#ccc">=</span><span class="token" style="color:#ccc">{</span><span class="token" style="color:#ccc">{</span><span class="token" style="color:#ccc">}</span><span class="token" style="color:#ccc">}</span></span><span class="token" style="color:#ccc">></span></span><span class="token plain-text"> 54 </span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"><</span><span class="token" style="color:#f8c555">Heading</span></span><span class="token" style="color:#ccc">></span></span><span class="token plain-text">Welcome to my app!</span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"></</span><span class="token" style="color:#f8c555">Heading</span></span><span class="token" style="color:#ccc">></span></span><span class="token plain-text"> 55 </span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"><</span><span class="token" style="color:#f8c555">Heading</span></span> <span class="token" style="color:#e2777a">level</span><span class="token script language-javascript"><span class="token script-punctuation" style="color:#ccc">=</span><span class="token" style="color:#ccc">{</span><span class="token" style="color:#f08d49">2</span><span class="token" style="color:#ccc">}</span></span> <span class="token" style="color:#e2777a">displayLevel</span><span class="token script language-javascript"><span class="token script-punctuation" style="color:#ccc">=</span><span class="token" style="color:#ccc">{</span><span class="token" style="color:#f08d49">3</span><span class="token" style="color:#ccc">}</span></span><span class="token" style="color:#ccc">></span></span><span class="token plain-text"> 56 Do some pretty cool things 57 </span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"></</span><span class="token" style="color:#f8c555">Heading</span></span><span class="token" style="color:#ccc">></span></span><span class="token plain-text"> 58 </span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"><</span><span class="token" style="color:#f8c555">Text</span></span><span class="token" style="color:#ccc">></span></span><span class="token plain-text"> 59 To get started, 60 </span><span class="token" style="color:#ccc">{</span><span class="token" style="color:#7ec699">" "</span><span class="token" style="color:#ccc">}</span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"><</span><span class="token" style="color:#f8c555">Link</span></span> <span class="token" style="color:#e2777a">href</span><span class="token" style="color:#7ec699"><span class="token" style="color:#ccc">=</span><span class="token" style="color:#ccc">"</span>/sign-up<span class="token" style="color:#ccc">"</span></span><span class="token" style="color:#ccc">></span></span><span class="token plain-text">create an account</span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"></</span><span class="token" style="color:#f8c555">Link</span></span><span class="token" style="color:#ccc">></span></span><span class="token" style="color:#ccc">{</span><span class="token" style="color:#7ec699">" "</span><span class="token" style="color:#ccc">}</span><span class="token plain-text"> 61 via email or your social network login. 62 </span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"></</span><span class="token" style="color:#f8c555">Text</span></span><span class="token" style="color:#ccc">></span></span><span class="token plain-text"> 63 </span><span class="token" style="color:#e2777a"><span class="token" style="color:#e2777a"><span class="token" style="color:#ccc"></</span><span class="token" style="color:#f8c555">ThemeProvider</span></span><span class="token" style="color:#ccc">></span></span> 64<span class="token" style="color:#ccc">)</span><span class="token" style="color:#ccc">;</span></code></pre><p font-weight="700" class="sc-AxirZ iyUcQQ">Still interested? Read the<!-- --> <a href="/docs" class="sc-AxhCb jACpTo">docs</a> <!-- -->to learn more!</p></section></main></div></div>
64<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"4A9pvt4fObNBQwMJ-vHKx","runtimeConfig":{},"nextExport":false,"isFallback":false,"appGip":true,"head":[["meta",{"charSet":"utf-8"}],["meta",{"name":"description","content":"Typograpy components for react and styled-components"}],["meta",{"name":"viewport","content":"initial-scale=1.0,width=device-width,viewport-fit=cover"}],["meta",{"httpEquiv":"Accept-CH","content":"Viewport-Width"}],["meta",{"name":"theme-color","content":"#ceeaeb"}],["link",{"rel":"stylesheet","href":"https://unpkg.com/a11y-css-reset@^1/combo.min.css"}],["title",{"children":"Styled Typography"}]]}</script>
64<script nomodule="" src="/_next/static/chunks/polyfills-a98cee78eb8282e29fb6.js"></script>
64<script src="/_next/static/chunks/main-fc3c13f8023eda7f8ac9.js" async=""></script>
64<script src="/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js" async=""></script>
64<script src="/_next/static/chunks/framework.8b01aa1eaa051cce0319.js" async=""></script>
64<script src="/_next/static/chunks/commons.4a1351f034b1f97b6b5a.js" async=""></script>
64<script src="/_next/static/chunks/pages/_app-c5995fb5f2ae225ce29e.js" async=""></script>
64<script src="/_next/static/chunks/02a4c0d08adb15a34219d1f02559f783b2308e00.6346eb0b5b006dbbd685.js" async=""></script>
64<script src="/_next/static/chunks/pages/index-be00624b04422e8b540b.js" async=""></script>
64<script src="/_next/static/4A9pvt4fObNBQwMJ-vHKx/_buildManifest.js" async=""></script>
64<script src="/_next/static/4A9pvt4fObNBQwMJ-vHKx/_ssgManifest.js" async=""></script>
64</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.