A Complete Guide to Web Design

Typography on the Web 43

PrinciplesWeb Design

Typography on the Web

Web Design in a Nutshell, eMatter Edition

• Keyboard entry


• 
  Sample text
  


• 
  Example text<br /> </li><br /> </ul><br /> <p>Again, because most people do not change the default font settings in their<br /> browser preferences, you can make a reasonable guess that text marked with the<br /> above HTML tags will be displayed in some variation of Courier.</p><br /> <p>Text in Graphics</p><br /> <p>Designers quickly learned that the sure-fire way to have absolute control over font<br /> display is to set the text in a graphic. It is common to see headlines, subheads,<br /> and call-outs rendered as GIF files. Many web pages are made up exclusively of<br /> graphics that contain all the text for the page.</p><br /> <p>GIF text advantages</p><br /> <p>The advantage to using graphics instead of HTML text is fairly obvious—control!</p><br /> <ul><br /> <li>You can specify text font, size, leading, letter spacing, color, and alignment—<br /> all attributes that are problematic in HTML alone.</li><br /> <li>Everyone with a graphical browser will see your page the same way.</li><br /> </ul><br /> <p>GIF text disadvantages</p><br /> <p>As enticing as this technique may seem, it comes with many drawbacks. Keep the<br /> following disadvantages in mind when deciding whether to use graphics for your<br /> text.</p><br /> <ul><br /> <li>Graphics take longer to download than text. Graphics are likely to be many<br /> orders of magnitude larger than HTML text with the same content, and will<br /> result in slower downloads.</li><br /> <li>Content is lost on nongraphical browsers. People who cannot (or have cho-<br /> sen not to) view graphics will see no content. Alternative text (using thealt<br /> attribute) in place of graphics helps, but is limited and not always reliable.</li><br /> <li>Information in graphics cannot be indexed or searched. In effect, by putting<br /> text in a graphic, you are removing useful pieces of information from your<br /> document. Again, thealt attribute helps here.</li><br /> </ul><br /> <p>Why Specifying Type is Problematic</p><br /> <p>The<font>tag’sfaceattribute and Cascading Style Sheets give web designers an<br /> added level of control over typography by enabling the specification of fonts and<br /> sizes. Although it is a step in the right direction, using these tags by no means<br /> guarantees that your readers will see the page exactly the way you’ve designed it.</p><br /> <p>Specifying fonts and sizes for use on web pages is made difficult by the fact that<br /> browsers are limited to displaying fonts that are installed on the user’s local hard<br /> drive. So, even though you’ve specified text to be displayed in the Georgia font, if<br /> users do not have Georgia installed on their machines they will see the text in</p> </div> <meta itemprop='headline' content="p 57: Typography on the Web 43 PrinciplesWeb Design Typography on the Web Web Design in a Nutshell, eMatter Edition Keyboard entry S ... - A Complete Guide to Web Design - free download pdf - issuhub"> </div> <div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <span itemprop="url"><b><a href="/view/index?id=4334&pageIndex=56" rel="previous" itemprop="name">← Previous</a></b></span> <span itemprop="url" class="mx-3"><b><a href="/view/index?id=4334&pageIndex=58" rel="next" itemprop="name">Next →</a></b></span> </div> <div style=" text-align: center; margin: 20px auto; padding: 13px; width: 240px; font-size: 20px; "> <a class="page-link" style="background-color: #72bf86;" target="_blank" href="/view/index?id=4334&pageIndex=56#bookdownload" title="Free download pdf" >Free download pdf</a> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-lg-3 ml-lg-auto mb-5 mb-lg-0"> <div class="mb-4"> <h5 class="text-dark">Get our desktop app</h5> </div> <a class="btn btn-icon btn-indigo rounded-circle mr-2" target="_blank" href="/download/issuhub.dmg"> <i class="fa fa-apple"></i> </a> <a class="btn btn-icon btn-indigo rounded-circle" target="_blank" href="/download/issuhub.exe"> <i class="fa fa-windows"></i> </a> </div> <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0"> <h5 class="text-dark">Company</h5> <!-- Nav Link --> <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/about">About</a></li> <li class="my-2"><a href="/contact">Contact</a></li> <li class="my-2"><a href="/news/index">News</a></li> </ul> <!-- End Nav Link --> </div> <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0"> <h5 class="text-dark">Features</h5> <!-- Nav Link --> <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/quick">Quick Start</a></li> <li class="my-2"><a href="/desktop">Desktop</a></li> <li class="my-2"><a href="/editor-help">Editor</a></li> </ul> <!-- End Nav Link --> </div> <div class="col-6 col-md-3 col-lg"> <h5 class="text-dark">Documentation</h5> <!-- Nav Link --> <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/support/index">Support</a></li> <li class="my-2"><a href="/site/pricing">Pricing</a></li> </ul> <!-- End Nav Link --> </div> <div class="col-6 col-md-3"> <h5 class="text-dark">Resources</h5> <!-- Nav Link --> <ul class="list-unstyled mb-0"> <li class="my-2"> <a href="/tutorial" target="_blank"> <span class="media align-items-center"> <i class="fa fa-info-circle mr-2"></i> <span class="media-body">Tutorial</span> </span> </a> </li> <li class="my-2"> <a href="/site/login"> <span class="media align-items-center"> <i class="fa fa-user-circle mr-2"></i> <span class="media-body">Your Account</span> </span> </a> </li> </ul> <!-- End Nav Link --> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-6 mb-4 mb-md-0"> <!-- Nav Link --> <ul class="nav nav-sm nav-white nav-x-sm align-items-center"> <li class="my-2"> <a href="/privacy">Privacy &amp; Policy</a> </li> <li class=" opacity my-2 mx-3">&#47;</li> <li class="my-2"> <a href="/terms">Terms</a> </li> </ul> <!-- End Nav Link --> </div> <div class="col-md-6 text-md-right"> <ul class="list-inline mb-0"> <!-- Social Networks --> <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://www.facebook.com/Issuhub-Flipbook-2315543688769343/"> <i class="fa fa-facebook text-dark"></i> </a> </li> <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://twitter.com/IssuhubBooks"> <i class="fa fa-twitter text-dark"></i> </a> </li> <!-- End Social Networks --> </ul> </div> </div> <!-- Copyright --> <div style="text-align: center;"> <div >&copy; ISSUHUB. 2024. All rights reserved.</div> </div> <!-- End Copyright --> </div> </div> </div> </div> <script src="/assets/6df76c57/assets/js/vendors/jquery-3.2.1.min.js"></script> <script src="/assets/6df76c57/assets/js/vendors/bootstrap.bundle.min.js"></script></body> </html>