Web Design: Typography and Element Classification - Prof. Peter L. Hoelter, Exams of Web Design and Development

Download Web Design: Typography and Element Classification - Prof. Peter L. Hoelter and more Exams Web Design and Development in PDF only on Docsity! VC 237 :: Week 07 2 of 6 10 November 2008 — Demonstration Outline — Has Web typography gotten better? o YES! … well, kind of… o When designers began working on the web, more visual control was desired. o Netscape introduced the <font> tag in 1995 to allow for better control of text, including size, face and color. o Today, designers are learning and using Cascading Style Sheets (CSS). Style sheets are the best of both worlds: they preserve the structural logic of a page while allowing for visual control of its’ presentation. Support for CSS is inconsistent across different browsers and computing platforms, though it's better than it used to be. CSS offer superior control over page layout, but is more technical in nature and can be difficult to learn. Basic Typographic Concepts Text Flow o By default, text flows as far right as it can before returning and beginning a new line. Without any constraints, this is always the right-hand side of the browser window. o As the browser window is re-sized, the text on a page re-flows to fit the new window size. o The most common way to restrict text flow is tables. o You can use Dreamweaver’s Table Layout Design mode or CSS layout templates to draw cells that can constrain text flow. Type differences between operating systems o Macintosh and Windows computers use a different default DPI setting. 72 DPI for Macs (though this is changing) 96 DPI for Windows o When font sizes are specified in points, the screen DPI is used to calculator the number of pixels to use to display a character. o Because of this, fonts have often looked a few sizes bigger on Windows than they do on the Mac. This has made it difficult to consistently display type, including line breaks and other common typographical adjustments, across operating systems. o Even on the same operating system, different browsers will display type and other elements differently. o Note: The default DPI setting in current Macintosh browsers is now set to emulate Windows standards (16pt font size, 96 dpi). Type Sizing Recommendations: o Design your pages so that exact text sizes do not matter that much. Design text boxes in which text can freely flow, and be OK with pages that scroll a bit more on a PC than on the Mac. o Use graphic text instead of HTML for areas that require exact type sizing. Navigation elements are often good candidates for this treatment. o Don’t use font sizes smaller than 9 pixels. Test your pages on both platforms to make sure they look correct. o Use Cascading Style Sheets and set font sizes in pixels. VC 237 :: Week 07 3 of 6 10 November 2008 — Demonstration Outline — Element Classification Block-level Elements: Headers and Paragraphs o Block-level elements were originally the only way to format text, and end- users could control their presentation (font, size, etc). o These elements describe the information hierarchy, or structure, of the page. Header elements contain header or sub-header copy Paragraph elements contain body copy List elements contain lists of items (ordered, unordered, term/definition, etc) o Block-level elements create a new paragraph when they are closed. o Header elements are ranked in order of importance (<h1> is first, <h2> is second, etc.). Headers faded in popularity when the <font> tag was introduced, but are now making a comeback as browsers improve support for CSS. Why use block-level elements? o Allow you to establish the structural hierarchy of a page. o Allow you to make use of the power of CSS. o Search engines index content better when it is enclosed in block-level elements. o Allows users with disabilities and mobile Web users who use alternative HTML readers to access your site. Default Heading and Paragraph Sample HTML <h1>Heading One</h1> <h2>Heading Two</h2> <h3>Heading Three</h3> <h4>Heading Four</h4> <h5>Heading Five</h5> <h6>Heading Six</h6> <p>Paragraph</p> Browser: Firefox 2.0 for Mac OS X, Default font size: 16pt. Inline Elements o Inline elements live within block-level elements. o These elements do not create a new paragraph after they are closed. o Inline elements include anchors (<a>), and bold and italic (<strong> and <em>). List-item Elements o Defines content as being part of a list. o Only includes the <li> element. o Because they are, by definition, part of a list, they can be numbered automatically by a Web browser.