Guttenberg to Google: Exploring Online Typography

Exploring Online Typography Ian Grivois, Athabasca University

Foundations Context Introduction “Typography Core Concepts A Design Approach exists to honor Visuals as a Language How We Read content.” Reading on the Screen Magazines Inspirations (Binghurst, 1999) Examples Moodle at Athabasca University Online Examples

“Typography, the art of designing with type, began in the West around  1455 when Johannes Guttenberg perfected the craft of printing from individual pieces of type” (Craig, 1999) The printing press caused a great leap forward in literacy and the spread  of knowledge; the internet is another revolution in access. What will it lead to? Enthusiasm for technology can overshadow the fact that distance  education students are still primarily learning by reading text---whether displayed on the screen or on paper. Careful consideration of typography can only help your students, website  visitors, and application users.

Strive for simplicity   “Make everything as simple as possible, but not simpler.” ~ Einstein  “If I had more time, I would have written a shorter letter.” ~ T.S. Elliot  Strive for brevity and craftsmanship. ~ Strunk and White Remember your audience   “How much copy is being read and under what conditions?” (Craig, 1999)  User testing and “simply putting oneself in the position of the reader” (Birdsall, 2004)  Apple Human Interface Guidelines (Apple Computers, 2008) What role should enjoyment play in learning?   Google’s playful logos and Flickr says “bonk” when a photo fails to upload properly

Read text before designing it  Discover outer logic of typography from inner logic of text  Make visible relationships between text and other elements  Choose a typeface that honors and makes clear the character of the text  Shape the page and frame the text block so that it honors and reveals  every element, every relationship between elements, and ever logical nuance of the text Give full typographic attention even to the incidental details  (Binghurst, 1999)

Invite the reader into the text  Reveal the tenor and meaning of the text  Clarify the structure and the order of the text  Link the text with other existing elements  Induce a state of energetic repose, which is the ideal condition for reading  (Binghurst, 1999)

TEXT  is an abstraction which must be read and then processed to derive meaning IMAGES  can communicate complex meaning quickly and directly

A do not run sign in an art gallery

WORDS  line, colour, texture, shape, and value GRAMMAR  contrast, repetition, alignment, and proximity EMPHASIS  achieved through harmony or counterpoint

Text is an image   Blocks of text can be seen as a block of gray punctuated by headings and other elements  Whitespace A Wichita State Psychology experiment with margins and line spacing concluded that whitespace reduced reading speed but increased comprehension.

Reading preferences are intimately related to what we’re used to and  what we expect. Readers prefer black text on white for body text  Body text size between 9 to 12 point size (Craig, 2004)  Line lengths between 35 and 70 characters (including spaces) with 66  as the ideal (Binghurst, 1999) “Balance the energy of creativity with the needs of legibility”  (Craig, 2004)

What are the differences in reader expectations when reading short and  long texts online? There’s a shift in reading retention between age of visitors and what  medium they are comfortable reading in: older readers retain more from print while younger retain more from online. “I don’t like to read long texts on the screen so why should we make our  students do this?” One key is to engage your readers.  Visual surprise and variety  Use the differences between textual elements to your advantage  Actively use charts, graphs, photos, and illustrations  Dynamic media and interaction

“People can learn more deeply from words and pictures than from words alone.” (Mayer, 2005) The Cambridge Handbook of Multimedia Learning

A large introductory photo and smaller supporting ones  Quotes can be pulled from the text and used to interrupt the “grayness”  of the text block Using elements of the text like headings, bullet lists, quotes, etc… in a  visually considered way Using contrast and emphasis to lead the eye through the page with  features like initial capital letters Use sidebars that contain information supporting but not essential to  main text Use way-finding or interface icons as visual elements rather than just  factual displays of information

Illustration can effectively communicate abstract concepts (See the Harvard Business Review for good examples)

Athabasca University Moodle Courses Heritage Resources Management 312: Heritage Research Behaviour 655: Self Directed Behaviour Master of Integrated Studies 626: Art and Crime

These sites are what Websites people are currently used Alistapart to when reading online. National Geographic Magazine Wired So, they are examples International Herald Tribune New York Times we should measure The New Yorker ourselves against when New York Magazine we design typography Time Magazine The Atlantic for our courses. The Economist The Guardian (Paraphrasing a course professor at Athabasca University)

Apple Computers (2008). Apple Human Interface Eshet-Alkalai, Y. (2008). Print Versus Digital: The   Guidelines. Retrieved July 14, 2008, from Effect of Text-Format on Critical Reading of Online http://developer.apple.com/documentation/UserE and Offline Information. Retrieved July 14, 2008, xperience/Conceptual/AppleHIGuidelines/XHIGInt from http://www.athabascau.ca/CNIE- ro/chapter_1_section_1.html RCIE/sess/pres_en.php?presentation_id=150 Binghurst, R. (1999). Elements of Typographic Mayer, R. (2005). The Cambridge Handbook of   Style. Vancouver: Hartley & Marks. Multimedia Learning. New York, NY: Cambridge University Press. Birdsall, D. (2004). Notes on Book Design. New  Haven, CT: Yale University Press. Felici, J. (2003). The Complete Manual of  Typography. Berkley, CA: Peachpit Press. Chaparro, B. , Baker, J., Shaikh, A., Hull, S., & Brady  L. (ND). Reading Online Text: A Comparison of Akademy. (2008). Longleat Hedge Maze. Creative  Four White Space Layouts. Retrieved April 2, 2009, Commons, Attribution-Noncommercial-Share Alike from http://psychology.wichita.edu/surl/ 2.0 Generic. Retrieved July 14, 2008, from usabilitynews/62/whitespace.htm http://www.flickr.com/photos/akademy/20574242 48/ Craig, J. & Bevington, W. (1999). Designing with  Type: A Basic Course in Typography. New York: Watson-Guptill.

http://www.iangrivois.ca	215
http://moodle.gprc.ab.ca	39
http://translate.googleusercontent.com	1

Guttenberg to Google: Exploring Online Typography

by grivois

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 255

Statistics