Typography Essentials, A Book Apart

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="google-site-verification" content="9ex0_Z0xQO5TbWWWG_YdS_AOVUveCyat58PnkSv7E3o" /> <title>Typography Essentials, A Book Apart</title> <link href="../cdn/shop/t/4/assets/2019-screen.scss%EF%B9%96v=60548189626548252431720553516.css" rel="stylesheet" type="text/css" media="all" /> <link rel="preload" href="../cdn/shop/t/4/assets/TitlingGothicFBCondensedRegular-subset%EF%B9%96v=144323233704978956321589824711.woff2" as="font" type="font/woff2"> <link rel="preload" href="../cdn/shop/t/4/assets/TitlingGothicFBSkylineRegular-subset%EF%B9%96v=82076782130832495991589824635.woff2" as="font" type="font/woff2"> <link rel="preload" href="../cdn/shop/t/4/assets/AdelleSans-Regular-subset%EF%B9%96v=170044181468326467751589824607.woff2" as="font" type="font/woff2"> <link rel="alternate" title="A Book Apart: Press Room RSS Feed" type="application/rss+xml" href="https://feeds.feedburner.com/a-book-apart"> <link rel="shortcut icon" href="../cdn/shop/t/4/assets/favicon%EF%B9%96v=90145869007515973581537450570.ico" type="image/x-icon"> <link rel="apple-touch-icon" sizes="57x57" href="../cdn/shop/t/4/assets/apple-touch-icon-57x57%EF%B9%96v=65803350735019661971537450561.png"> <link rel="apple-touch-icon" sizes="60x60" href="../cdn/shop/t/4/assets/apple-touch-icon-60x60%EF%B9%96v=150262060825672676901537450561.png"> <link rel="apple-touch-icon" sizes="72x72" href="../cdn/shop/t/4/assets/apple-touch-icon-72x72%EF%B9%96v=147896007713647014101537450561.png"> <link rel="apple-touch-icon" sizes="76x76" href="../cdn/shop/t/4/assets/apple-touch-icon-76x76%EF%B9%96v=44952889816077047171537450561.png"> <link rel="apple-touch-icon" sizes="114x114" href="../cdn/shop/t/4/assets/apple-touch-icon-114x114%EF%B9%96v=115119225902024552321537450560.png"> <link rel="apple-touch-icon" sizes="120x120" href="../cdn/shop/t/4/assets/apple-touch-icon-120x120%EF%B9%96v=102068666138980899281537450560.png"> <link rel="apple-touch-icon" sizes="144x144" href="../cdn/shop/t/4/assets/apple-touch-icon-144x144%EF%B9%96v=135072051314031706611537450560.png"> <link rel="apple-touch-icon" sizes="152x152" href="../cdn/shop/t/4/assets/apple-touch-icon-152x152%EF%B9%96v=57942616554089397631537450561.png"> <link rel="apple-touch-icon" sizes="180x180" href="../cdn/shop/t/4/assets/apple-touch-icon-180x180%EF%B9%96v=64316675395298681401537450561.png"> <link rel="icon" type="image/png" href="../cdn/shop/t/4/assets/android-chrome-192x192%EF%B9%96v=119341456129549094591537450560.png" sizes="192x192"> <link rel="me" href="https://front-end.social/@abookapart"> <meta name="description" content="Brief books for people who design, write,聽and聽code "> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@abookapart" /> <meta name="twitter:title" content="A Book Apart" /> <meta name="twitter:description" content="Brief books for people who design, write,聽and聽code " /> <meta property="og:title" content="A Book Apart - Typography Essentials" /> <meta property="og:description" content="Brief books for people who design, write,聽and聽code " /> <meta property="og:site_name" content="A Book Apart" /> <script src='../cdn/shop/t/4/assets/jquery-3.3.1.min%EF%B9%96v=61395414644828968241561739218.js' type='text/javascript'></script> <style>.site-nav { background-color: #9ba831; } .logo-tagline, a, .feature-title, .product-out-of-stock-notify em, .product-header__edition { color: #9ba831; } #announcement { border-bottom-color: #9ba831; } </style> <script> // Picture element HTML5 shiv document.createElement( "picture" ); </script> <script src="../cdn/shop/t/4/assets/picturefill%EF%B9%96v=131268525102640775091537450576.js" async></script> <link rel="canonical" href="typography-essentials.html"> <meta property="og:image" content="https://abookapart.com/cdn/shop/t/4/assets/aba-og.webp" /> <meta property="og:image:secure_url" content="https://abookapart.com/cdn/shop/t/4/assets/aba-og.webp" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="1200" /> </head> <body id="collection"> <header role="banner"> <a class='branding' href='/'> <picture class="branding__logo"> <source media="(max-width: 599px)" srcset="../cdn/shop/t/4/assets/aba-icon%EF%B9%96v=99583976875288395861537450559.svg" type="image/svg+xml"> <source srcset="../cdn/shop/t/4/assets/aba-logo-2%EF%B9%96v=5628627351356293221537450559.svg" type="image/svg+xml"> <img srcset="../cdn/shop/t/4/assets/aba-logo%EF%B9%96v=14272058534771725271537450560.png" alt="A Book Apart"> </picture> <div class="branding__wordmark">A Book Apart</div> </a> <div class="site-nav"> <nav class='site-nav__primary'> <ul> <li id='nav-store'> <a href='/products/'>Shop</a> </li> <li id='nav-press'> <a href='/blogs/press/'>Blog</a> </li> <li id='nav-about'> <a href='../pages/about/'>About</a> </li> </ul> </nav> <nav class='site-nav__secondary'> <ul> <li id='nav-twitter' class="site-nav__social"> <a href='http://twitter.com/abookapart' class="site-nav__link--icon"> <svg viewBox="0 0 15 12" width="15" height="12" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M15 1.42a6.32 6.32 0 0 1-1.53 1.57v.4c0 4-3.09 8.61-8.75 8.61A8.77 8.77 0 0 1 0 10.77c.24.03.49.05.73.05 1.44 0 2.78-.61 3.82-1.44a3.06 3.06 0 0 1-2.87-2.1 3.25 3.25 0 0 0 1.4-.05A3.04 3.04 0 0 1 .6 4.26v-.04c.41.22.88.36 1.39.38A3 3 0 0 1 .62 2.09c0-.57.16-1.03.42-1.47a8.8 8.8 0 0 0 6.34 3.1 3.04 3.04 0 0 1 3-3.73c.89.01 1.69.39 2.26.97.7-.14 1.35-.4 1.94-.74-.22.7-.7 1.3-1.35 1.68A6.16 6.16 0 0 0 15 1.42z"/></svg> </a> </li> <li id='nav-instagram' class="site-nav__social"> <a href='http://instagram.com/abookapart' class="site-nav__link--icon"> <svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M8 0c2.17 0 2.45.01 3.3.05.85.04 1.43.17 1.94.37.53.2.97.48 1.42.92.44.45.72.9.92 1.42.2.5.33 1.09.37 1.94.04.85.05 1.13.05 3.3s-.01 2.45-.05 3.3a5.87 5.87 0 0 1-.37 1.94c-.2.53-.48.97-.92 1.42-.45.44-.9.72-1.42.92-.5.2-1.09.33-1.94.37-.85.04-1.13.05-3.3.05a56.3 56.3 0 0 1-3.3-.05 5.85 5.85 0 0 1-1.94-.37c-.53-.2-.97-.48-1.42-.92a3.9 3.9 0 0 1-.92-1.42c-.2-.5-.33-1.09-.37-1.94C0 10.45 0 10.17 0 8s.01-2.45.05-3.3c.04-.85.17-1.43.37-1.94.2-.53.48-.97.92-1.42.45-.44.9-.72 1.42-.92.5-.2 1.09-.33 1.94-.37C5.55 0 5.83 0 8 0m5.23 3.73a.96.96 0 1 0-1.92 0 .96.96 0 0 0 1.92 0M8 3.89a4.1 4.1 0 1 0 0 8.22 4.1 4.1 0 0 0 0-8.22m0 6.78a2.67 2.67 0 1 1 0-5.34 2.67 2.67 0 0 1 0 5.34"/></svg> </a> </li>  <li id='nav-help'> <a href='/pages/help/'>Help</a> </li> <li id='nav-login'> <a href='/pages/help/#access_account'>Sign In</a> </li> </ul> </nav> <a id='nav-cart' class='shopping-cart' href='https://abookapart.com/pages/about' title='View Cart'> <span class='shopping-cart__count'>0</span> <svg class='shopping-cart__icon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 20"><circle cx="11.55" cy="18.23" r="1.77"/><circle cx="20.02" cy="18.23" r="1.77"/><path d="M22.1 13.24H9.77L5.5.6C5.4.26 5.05 0 4.67 0H.9C.4 0 0 .4 0 .9s.4.9.9.9H4l4.26 12.63c.12.37.47.6.85.6h13c.5 0 .9-.4.9-.9s-.4-.9-.9-.9zm1.94-9.83L8.74 2.1c-.48-.04-.75.3-.6.77l2.67 7.94c.18.47.7.85 1.2.85h11.17c.5 0 .95-.4 1-.9l.68-6.35c.05-.5-.3-.95-.8-1z"/></svg> <span class='shopping-cart__text'>Cart</span> </a> </div> </header> <main id="main"> <header class="hero pack__header" style="background-color: #8c982c;"> <h4 class="pack__badge">Book Pack</h4> <h2 class='pack__title'>Typography Essentials</h2> <div class="pack__description"> Design readable, great-looking words. </div> </header> <div class='content' id='collection'> <div class="product-details"> <div class="product-purchase">    </div> <section class="product-info"> <div class="container container--narrow"> <h3 class="subheading subheading--fancy"><span>Save <span class="badge"><span>10%</span><div></div></span> when you buy this collection of books</span></h3> <ul class='quote-list'> <li class='quote-list__book'> <a href='/products/flexible-typesetting'> <img src="../cdn/shop/products/aba-cover-27_160x@3x%EF%B9%96v=1532470792.png" alt="Flexible Typesetting" /> <div> <blockquote class="icon-quote"> <p>Brown shows us techniques to make sites clearer and more successful鈥攏ot just front and center, but behind the scenes as well.</p> <cite>Tobias Frere-Jones</cite> </blockquote> <div class="quote-list__meta"> <h4 class="quote-list__title">Flexible Typesetting</h4> <div class="quote-list__author">Tim Brown</div> </div> </div> </a> </li> <li class='quote-list__book'> <a href='/products/webfont-handbook'> <img src="../cdn/shop/products/aba-briefs-cover-7_07fe9ea6-2b1c-4041-a973-3d3e60f28032_160x@3x%EF%B9%96v=1537209133.png" alt="Webfont Handbook" /> <div> <blockquote class="icon-quote"> <p>...the best, most complete resource for responsibly navigating the tricky world of webfonts.</p> <cite>Zach Leatherman</cite> </blockquote> <div class="quote-list__meta"> <h4 class="quote-list__title">Webfont Handbook</h4> <div class="quote-list__author">Bram Stein</div> </div> </div> </a> </li> <li class='quote-list__book'> <a href='/products/on-web-typography'> <img src="../cdn/shop/products/ABA-cover-11_db28d356-b628-4c40-9205-a3e8c7988916_160x@3x%EF%B9%96v=1463456277.png" alt="On Web Typography" /> <div> <blockquote class="icon-quote"> <p>...designing with type for screens finally has the clear, wise, and affable introduction the practice deserves.</p> <cite>Frank Chimero</cite> </blockquote> <div class="quote-list__meta"> <h4 class="quote-list__title">On Web Typography</h4> <div class="quote-list__author">Jason Santa Maria</div> </div> </div> </a> </li> </ul> </div> </section> </div> </div> </main> <footer role="contentinfo"> <div class="section section--close-top section--tan"> <div class="container"> <div class="site-footer grid"> <div class="grid__item medium--c-5of12"> <h3 class="site-footer__title">Newsletter</h3> <form action='' class="newsletter__form " method='post' target='_blank'> <div style="display: none;" aria-hidden="true"> <label for="website">Website</label><br /> <input type="text" id="website" name="website" tabindex="-1" autocomplete="false" value="" /> </div> <div class='newsletter__field-group'> <label for='newsletter-email'>Email<span> Address</span></label> <input class='email not-allowed' id='newsletter-email' name='fields[email]' type='email' value='' disabled /> <button class='btn--rounded not-allowed' type='submit' disabled>Subscribe</button> </div> </form> <p class="newsletter__note">By signing up, you agree to our <a href='/pages/privacy-policy'>Terms of Use</a>.</p> </div> <div class="grid__item small--c-1of3 medium--c-3of12"> <h3 class="site-footer__title">Follow Us</h3> <ul class="site-footer__nav site-footer__nav--social"> <li class="site-footer__item--icons"> <a href='http://twitter.com/abookapart'><svg viewBox="0 0 15 12" width="15" height="12" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M15 1.42a6.32 6.32 0 0 1-1.53 1.57v.4c0 4-3.09 8.61-8.75 8.61A8.77 8.77 0 0 1 0 10.77c.24.03.49.05.73.05 1.44 0 2.78-.61 3.82-1.44a3.06 3.06 0 0 1-2.87-2.1 3.25 3.25 0 0 0 1.4-.05A3.04 3.04 0 0 1 .6 4.26v-.04c.41.22.88.36 1.39.38A3 3 0 0 1 .62 2.09c0-.57.16-1.03.42-1.47a8.8 8.8 0 0 0 6.34 3.1 3.04 3.04 0 0 1 3-3.73c.89.01 1.69.39 2.26.97.7-.14 1.35-.4 1.94-.74-.22.7-.7 1.3-1.35 1.68A6.16 6.16 0 0 0 15 1.42z"/></svg>@abookapart on Twitter</a> </li> <li class="site-footer__item--icons"> <a href="http://instagram.com/abookapart"><svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M8 0c2.17 0 2.45.01 3.3.05.85.04 1.43.17 1.94.37.53.2.97.48 1.42.92.44.45.72.9.92 1.42.2.5.33 1.09.37 1.94.04.85.05 1.13.05 3.3s-.01 2.45-.05 3.3a5.87 5.87 0 0 1-.37 1.94c-.2.53-.48.97-.92 1.42-.45.44-.9.72-1.42.92-.5.2-1.09.33-1.94.37-.85.04-1.13.05-3.3.05a56.3 56.3 0 0 1-3.3-.05 5.85 5.85 0 0 1-1.94-.37c-.53-.2-.97-.48-1.42-.92a3.9 3.9 0 0 1-.92-1.42c-.2-.5-.33-1.09-.37-1.94C0 10.45 0 10.17 0 8s.01-2.45.05-3.3c.04-.85.17-1.43.37-1.94.2-.53.48-.97.92-1.42.45-.44.9-.72 1.42-.92.5-.2 1.09-.33 1.94-.37C5.55 0 5.83 0 8 0m5.23 3.73a.96.96 0 1 0-1.92 0 .96.96 0 0 0 1.92 0M8 3.89a4.1 4.1 0 1 0 0 8.22 4.1 4.1 0 0 0 0-8.22m0 6.78a2.67 2.67 0 1 1 0-5.34 2.67 2.67 0 0 1 0 5.34"/></svg>@abookapart on Instagram</a> </li> <li class="site-footer__item--icons"> <a href="http://feeds.feedburner.com/a-book-apart"><svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>RSS</title><path d="M16 12.6c0 1.9-1.5 3.4-3.4 3.4H3.4A3.4 3.4 0 0 1 0 12.6V3.4C0 1.5 1.5 0 3.4 0h9.2C14.5 0 16 1.5 16 3.4v9.2zM4.3 13a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8zm-1.5-5a5 5 0 0 1 5 5H10a7 7 0 0 0-7-7v2zm0-3.7c4.8 0 8.7 4 8.7 8.7h2c0-5.9-4.8-10.7-10.7-10.7v2z"/></svg>A Book Apart News RSS</a> </li> </ul> </div> <div class="grid__item small--c-1of3 medium--c-2of12"> <h3 class="site-footer__title">Shop</h3> <ul class="site-footer__nav"> <li> <a href='/collections/books' title='Books'>Books</a> </li> <li> <a href='/collections' title='Privacy Policy'>Starter Packs</a> </li> <li> <a href='/collections/gear' title='Gear'>Gear</a> </li> </ul> </div> <div class="grid__item small--c-1of3 medium--c-2of12"> <h3 class="site-footer__title">Company</h3> <ul class="site-footer__nav"> <li> <a href='/pages/help/' title='Help & Contact Us'>Help & Contact</a> </li> <li> <a href='../pages/about/' title='About Us'>About Us</a> </li> <li> <a href='/pages/resources-for-authoring/' title='Resources for Authoring'>Resources for Authoring</a> </li>  </ul> </div> </div> </div> </div> <div class="section section--close-top section--tan--dark"> <div class="container"> <div class="site-footer__legal"> <p class="site-credits">© Copyright <script>document.write(new Date().getFullYear())</script>, A Book Apart, LLC <a href='/pages/privacy-policy' title='Privacy Policy'>Privacy Policy</a></p> </div> </div> </div> </footer> </body> </html>

CINXE.COM

Typography Essentials, A Book Apart