access-nyc-patterns

<!DOCTYPE html> <html class="bg-color-white text-size-0" lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link href="styles/site-default.css" rel="stylesheet" /> <title>Fonts</title> <noscript> <style> body { visibility: visible !important; } </style> </noscript> <script type="text/javascript"> function load() { document.body.style.visibility = 'visible' }; </script> </head> <body class="bg-color-white" onload="load()" style="visibility: hidden;"> <a class="sr-only" href="#main-content">Skip to main content</a> <header class="px-2"> <div class="border-b border-color-grey-light"> <div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2"> <div> <h1 class="m-0 p-0 leading-normal"><span class="hidden">ACCESS NYC</span> <svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden"> <use xlink:href="#icon-logo-mark"></use> </svg> <svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block"> <use xlink:href="#icon-logo-full"></use> </svg> </h1> </div> <div class="flex items-center"> <h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2> <h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2> <nav class="text-font-size-small"> <a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS">0.0.11-1</a> <a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS">0.0.11-1</a> <a class="ml-1 screen-tablet:ml-2" data-js="toggle" href="#main-menu">Menu</a> </nav> </div> </div> </div> </header> <aside aria-hidden="true" class="text-font-size-small bg-color-blue-light hidden" id="main-menu" style="position:relative;top:-1px"> <div class="page-wrapper"> <div class="flex py-4"> <nav class="flex-1"><span class="screen-desktop:block border-b border-color-white p-1">Main;</span> <a class="screen-desktop:block p-1" href="index">Home</a> <a class="screen-desktop:block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a> <a class="screen-desktop:block p-1" href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS">GitHub</a> </nav> <nav class="flex-1 pl-4"><span class="screen-desktop:block border-b border-color-white p-1">Elements;</span> <a class="screen-desktop:block p-1" href="buttons">Buttons</a> <a class="screen-desktop:block p-1" href="checkboxes">Checkboxes</a> <a class="screen-desktop:block p-1" href="colors">Colors</a> <a class="screen-desktop:block p-1" href="dividers">Dividers</a> <a class="screen-desktop:block p-1" href="font-families">Fonts</a> <a class="screen-desktop:block p-1" href="icons">Icons</a> <a class="screen-desktop:block p-1" href="inputs">Inputs</a> <a class="screen-desktop:block p-1" href="layouts">Layouts</a> <a class="screen-desktop:block p-1" href="links">Links</a> <a class="screen-desktop:block p-1" href="lists">Lists</a> <a class="screen-desktop:block p-1" href="nav">Nav</a> <a class="screen-desktop:block p-1" href="program-labels">Program Labels</a> <a class="screen-desktop:block p-1" href="radios">Radios</a> <a class="screen-desktop:block p-1" href="tables">Tables</a> <a class="screen-desktop:block p-1" href="tooltips">Tooltips</a> <a class="screen-desktop:block p-1" href="toggles">Toggles</a> <a class="screen-desktop:block p-1" href="typography">Typography</a> <a class="screen-desktop:block p-1" href="selects">Selects</a> </nav> <nav class="flex-1 pl-4"><span class="screen-desktop:block border-b border-color-white p-1">Components;</span> <a class="screen-desktop:block p-1" href="accordion">Accordion</a> <a class="screen-desktop:block p-1" href="alert-box">Alert Box</a> <a class="screen-desktop:block p-1" href="card">Card</a> <a class="screen-desktop:block p-1" href="checklist">Checklist</a> <a class="screen-desktop:block p-1" href="disclaimer">Disclaimer</a> <a class="screen-desktop:block p-1" href="filter">Filter</a> <a class="screen-desktop:block p-1" href="header">Header</a> <a class="screen-desktop:block p-1" href="member-list">Member List</a> <a class="screen-desktop:block p-1" href="text-controller">Text Controller</a> <a class="screen-desktop:block p-1" href="share-form">Share Form</a> <a class="screen-desktop:block p-1" href="side-nav">Side Nav</a> <a class="screen-desktop:block p-1" href="question">Question</a> </nav> <nav class="flex-1 pl-4"><span class="screen-desktop:block border-b border-color-white p-1">Objects;</span> <a class="screen-desktop:block p-1" href="announcements">Announcements</a> <a class="screen-desktop:block p-1" href="banner">Banner</a> <a class="screen-desktop:block p-1" href="card-list">Card Lists</a> <a class="screen-desktop:block p-1" href="content">Content</a> <a class="screen-desktop:block p-1" href="footer">Footer</a> <a class="screen-desktop:block p-1" href="mobile-nav">Mobile Nav</a> <a class="screen-desktop:block p-1" href="navigation">Navigation</a> <a class="screen-desktop:block p-1" href="search-box">Search Box</a> </nav> </div> </div> </aside> <main class="pt-4" id="main-content"> <article class="py-4"> <h1 class="px-1">Fonts</h1> <section class="pb-4" id="font-stacks"> <header class="pt-1 px-2 border-b border-color-grey-light mb-3"> <h2>Font Family Stacks</h2> </header> <div class="layout--columns"> <div> <div class="page-wrapper pb-3 px-2 text-font-size-small"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div> <div> <div class="mb-2"><code class="code">font-system</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">-apple-system</span>, <span class="whitespace-no-wrap">BlinkMacSystemFont</span>, <span class="whitespace-no-wrap">"Segoe UI"</span>, <span class="whitespace-no-wrap">Roboto</span>, <span class="whitespace-no-wrap">Oxygen-Sans</span>, <span class="whitespace-no-wrap">Ubuntu</span>, <span class="whitespace-no-wrap">Cantarell</span>, <span class="whitespace-no-wrap">"Helvetica Neue"</span>, <span class="whitespace-no-wrap">sans-serif</span>, </pre></div> </div> <div> <div class="mb-2"><code class="code">font-default-sans</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">"Noto Sans"</span>, <span class="whitespace-no-wrap">sans-serif</span>, </pre></div> </div> <div> <div class="mb-2"><code class="code">font-default-serif</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">"Noto Serif"</span>, <span class="whitespace-no-wrap">serif</span>, </pre></div> </div> <div> <div class="mb-2"><code class="code">font-kr-sans</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">"Noto Sans CJK KR"</span>, <span class="whitespace-no-wrap">"Noto Sans"</span>, <span class="whitespace-no-wrap">sans-serif</span>, </pre></div> </div> <div> <div class="mb-2"><code class="code">font-kr-serif</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">"Noto Sans CJK KR"</span>, <span class="whitespace-no-wrap">"Noto Serif"</span>, <span class="whitespace-no-wrap">serif</span>, </pre></div> </div> <div> <div class="mb-2"><code class="code">font-tc-sans</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">"Noto Sans CJK TC"</span>, <span class="whitespace-no-wrap">"Microsoft Yahei"</span>, <span class="whitespace-no-wrap">"微软雅黑"</span>, <span class="whitespace-no-wrap">STXihei</span>, <span class="whitespace-no-wrap">"华文细黑"</span>, <span class="whitespace-no-wrap">"Noto Sans"</span>, <span class="whitespace-no-wrap">sans-serif</span>, </pre></div> </div> <div> <div class="mb-2"><code class="code">font-tc-serif</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">"Noto Sans CJK TC"</span>, <span class="whitespace-no-wrap">"Microsoft Yahei"</span>, <span class="whitespace-no-wrap">"微软雅黑"</span>, <span class="whitespace-no-wrap">STXihei</span>, <span class="whitespace-no-wrap">"华文细黑"</span>, <span class="whitespace-no-wrap">"Noto Serif"</span>, <span class="whitespace-no-wrap">serif</span>, </pre></div> </div> <div> <div class="mb-2"><code class="code">font-ar-sans</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">"Noto Naskh Arabic"</span>, <span class="whitespace-no-wrap">"Noto Sans"</span>, <span class="whitespace-no-wrap">sans-serif</span>, </pre></div> </div> <div> <div class="mb-2"><code class="code">font-ar-serif</code></div> <div class="code-block"><pre>font-family: <span class="whitespace-no-wrap">"Noto Naskh Arabic"</span>, <span class="whitespace-no-wrap">"Noto Serif"</span>, <span class="whitespace-no-wrap">serif</span>, </pre></div> </div> </div> </div> </section> </article> </main> <footer class="py-4 text-center bg-color-blue-dark text-color-white links-invert font-smooth"> <p class="m-0">Maintained by  <a href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">NYC Opportunity</a> </p> </footer> <script src="scripts/AccessNyc.js"></script> <script src="scripts/markdown.min.js"></script> <script type="text/javascript"> var access = new AccessNyc(); access.markdown(); access.icons(); access.toggle(); </script> </body> </html>