Unit 2/Project 2: Instructor Notes

What is typography?

  • Traditional definition: “style, arrangement, and appearance” (“Type on the Web”, 235)
  • Syntax: That’s right. Designing for the web includes being a good copy editor. You must understand what is acceptable punctuation and how it must be coded in the HTML. See the “HTML characters and symbols” link on the course WordPress web site under the Resources category. See examples of punctuation on the web on page 242 in “Type on the Web”.
  • Macro versus micro: “Macro-typography (overall text-structure) in contrast to microtypography (detailed aspects of type and spacing) covers many aspects
    of what we nowadays call ‘information design'” (“Web Design is 95% Typography“).
  • Optimization: “Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance” (“Web Design is 95% Typography“).
  • Interface: “Treat text as a user interface” (“Web Design is 95% Typography“).
  • Technological capabilities, limitations of the medium, and rhetorical constraints (“Type on the web”)
  • “Designing with type for digital devices is a rapidly changing prospect. However, the basic principles are timeless: providing the best possible viewing experience for the reader by giving the most appropriate form to the content” (“Type on the Web”, 248).

Why should we consider typography when designing for the Web?

  • ” We can focus on creating content that is readable, functional, searchable, accessible and, yes, beautiful” (“Typography for the Web“).
  • “Because beauty matters and is an important part of the user experience” (“Typography for the Web“).
  • “95% of the information on the web is written language” (“Web Design is 95% Typography“).
  • “It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography”  (“Web Design is 95% Typography“).

What are some basic principles of typography?

  • “Good typography doesn’t exist in a vacuum of typefaces alone—it takes a system to create good typography. And part of this system is structure” (“Typography for the Web“).
  • Column width/line length: “try to avoid type that goes across the total width of the page” (“Type on the Web”, 237). How do you think text that expands the entire width of a screen prevents or enhances reading?
  • Line breaks: In print, we tend to add arbitrary line breaks, but this is not the case when designing for the web. Generally, you should “not make manual breaks” when designing a web site (“Type on the Web”, 237). See page 237 for an example.
  • Color: The main concept to keep in mind is that you should design for good contrast color rather than perfect color because color varies on different computers and devices.
  • Rhetorical skill: Typography brings up questions about rhetoric. Your choices of type styles and layout must adhere to the best available options given the “demographics and needs of your audience.” Moreover, typography makes designers keep a “cardinal rule of web design” in mind: “check how your web pages look on as many browsers as possible” (“Type on the Web”, 244).
  • Hierarchy:
    • “Keep the most important information highly visible, and perhaps “above the fold,” which means viewable without scrolling; this is especially true for navigational elements” (“Type on the Web”, 244)
    • “Use type size, style, case, placement, and color to establish and reinforce the hierarchy” (“Type on the Web”, 244).
    • “Use subheads and other “chunking” techniques (such as bulleted lists and anchored outlines) to break up lengthy copy and organize content into small, digestible bits” (“Type on the Web”, 244).
    • “Check the appearance of bolds and italics used for emphasis (especially if you are using web-safe fonts) to make sure they stand out enough, as their appearance and emphasis potential can vary from font to font, size to size, and monitor to monitor” (“Type on the Web”, 244).
    • “Don’t use underlines for anything but links” (“Type on the Web”, 244).
    • “Avoid all-cap settings for a lot of text, as it reduces readability and tires the eye” (“Type on the Web”, 244).
    • “And don’t forget to view the content on as many different sized monitors, screens, and devices as possible” (“Type on the Web”, 244).
  • Emphasis: Use type to draw attention to important elements. The trick is to balance how you emphasize text without drawing attention away from other important elements. Emphasizing important elements does not mean making type ‘bigger’ or ‘bolder’. You can emphasize with type according to hierarchy, size, color, layout, spacing between letters (kerning), spacing between sentences (leading, pronounced ledding).
  • Dos and don’ts: See page 245 in “Type on the Web” for a list of other dos and don’ts, such as justifying type on the web (this is also covered  at the 7:39 mark in “Don’t Fear Web Typography” when Hische talks about text-align) and making manual line breaks.
  • Technological capabilities, limitations of the medium, and rhetorical constraints.

How does type differ from the web?

    • The same principles of good typography applies to print and the web, but web typography is a different “animal” (“Don’t Fear Web Typography“)
    • “appearance, behavior, application” (“Type on the Web”, 235)
      • “type on the web is not fixed, predictable, and controllable”
      • varies “from user to user, based on the viewer’s operating system, browser, installed fonts, and screen resolution” (“Type on the Web”, 235)
      • Fonts must be installed on the viewer’s computer or on your server (“Type on the Web”, 235)
      • Type size can differ on various browsers and screen devices. Web designer have “little or no control over them.” See an example on page 236. (“Type on the Web”, 236).
      • Column depth might vary as opposed to controlling the depth of a column in print (“Type on the Web”, 238).
      • Color varies from across different monitors, browsers, and devices (“Type on the Web”, 239)
      • Historically, there have been a vast number of fonts specifically developed for print. Typography for the web has a shorter history. For example, Microsoft developed a set of core fonts that were deemed “web-safe fonts” such as Verdana, Trebuchet MS, Arial, etc. (“Type on the Web,” 238). See examples on page 238 of how the author talks about the anatomy of these web-safe fonts.

What other things should you consider when designing typography for the web?

  • Type choice (“Type on the Web”, 248)
  • Type size (“Type on the Web”, 248)
  • Alignment (“Type on the Web”, 248)
  • Fixed layout (“Type on the Web”, 248)
  • Leading (spaces between the lines) (“Type on the Web”, 248)
  • Hyphenation, line breaks, rag, widows, orphans (“Type on the Web”, 248)
  • Anchoring images (“Type on the Web”, 248)
  • Display consistency (“Type on the Web”, 248)

What should you look for when choosing a font?

  1. Legibility:
    • “Text is meant to read” (“Understanding legibility“)
    • “if feels hard to read people won’t want to read it” (“Understanding legibility“)
    • Two things make up legibility: healthy strokes around the letters and health spaces in and around the letters (“Understanding legibility“). See the 0:34 second mark in the video for an example of type that is not legible.

 

What resources are available to apply typography on the web?

  • Web fonts.
    • Innovations that make a wider range of type available on the web, such as CSS@font-face. There are See page 239 in “Type on the Web” for advantages and disadvantages of using newly developed web fonts that go beyond the web-safe fonts that have traditionally been used on the web.
    • “Web fonts fall into two categories: new typeface designs that have been specifically created for the web, and desktop fonts originally intended for print, which have been reworked and optimized for use on the web. This can include thickening thin strokes, opening up small counters, adjusting stroke angles, widening the proportions, opening up the spacing, and tweaking other design details in order to improve appearance and performance in lower-resolution environments. NOTE: If you are using the same typeface for both print and the web, make sure you are using the appropriate version for each usage” (“Type on the Web”, 240).
    • You need two things to use web fonts beyond the “safe” options: “the actual fonts, and a place to host them.” There are various web-font services that you can use to do both (“Type on the Web”, 241). See page 241 in “Type on the Web” and page 277 in chapter 12 of HTML and CSS: Design and Build Web Sites for a list of web-font services.
  • Graphics: You can use images as type on the web, but there are many disadvantages explained on page 244 in “Type on the Web”, such as slow loading due to file size, graphics are not easy to edit, and search engines can not search flattened images even though you can add information in the “alt” tag attribute.
  • Font properties in CSS:
    • font-family
    • font-weight
    • font-size
    • text-transform
    • letter-spacing (tracking in typography terms)
    • line-height (leading in typography terms)
    • text-align

Sample exercises

  • Choose a web site to annotate your critique of how typography is used. See page “Type on the Web” for examples of how to critique about typography in terms of principles.