Typography

🌳 🌳 Prof. Ian Besler 🍂 🍂 🍂 🍂 RWU Graphic Design 🌳 🌳 DM+D+C 🌳 🌳

Agenda

  1. Week 8: Vectors, SVGs, and Code
    Lecture Slides 🛝 🛝 🛝 Vector Workspace, SVGs
    • Adobe Illustrator Basics
      • Raster/Bitmap workspaces, Vector workspaces
      • Type palette, Character palette, Kerning, Tracking
      • Selection, Direct Selection, Anchor Point Tool
      • Anchor Points, Paths, Bezier Curve Handles
      • SVG --> HTML
    Ian’s Type/Trance Project
    “Type/Trance (Arial),” Ian Besler,
    Work for Next Class Session (Due )
    Week 7: Fall Break 🍂 🎃 🍂
    Revised Mood Boards Due Next Class Session (Tues 10/15) 🏄‍♀️ 🏄‍♀️ 🏄‍♀️
    Combined Class Critiques
    • This is an opportunity to sharpen and clarify your Project 2: Type/Trance concept.
      • Market Sector 🏪 🏪 🏪: Identify the market sector for which you project is intended:
        • Activism, Awareness, Non-Profit Sector
        • Cultural Sector
        • Futurist/Fantasy/Speculative Sector
        • Hospitality Sector
        • Office/Professional Sector
        • Retail Sector
        • Spirituality/Faith Sector
        • Wellness/Health Sector
      • Passion Points ❤️‍🔥 ❤️‍🔥 ❤️‍🔥: Identify three (3) aspects of the project concept that are most interesting and exciting.
      • Pain Points ❤️‍🩹 ❤️‍🩹 ❤️‍🩹: Identify three (3) aspects of the project concept that are most challenging or anxiety-provoking.
      • Goals 🥅 🥅 🥅: Based on the market sector that you identified, clearly state one (1) goal of the project. What is most important for the communication to accomplish?
  2. Week 6: Coding for Vibes/Moods 😎 🐦‍⬛ 🌊
    Project 2 Design Ideation 🤔 💭 💡
    • Take twenty (20) minutes to brainstorm clients/sites that you might want to pursue for Project 2
    • Try to develop three (3) different project concepts across multiple different categories that we discussed:
      • Activism, Awareness, Non-Profit Sector
      • Cultural Sector
      • Futurist/Fantasy/Speculative Sector
      • Hospitality Sector
      • Office/Professional Sector
      • Retail Sector
      • Spirituality/Faith Sector
      • Wellness/Health Sector
    • Ideally this would be a place that you can visit within the next two (2) weeks to gather research and imagery
    • Search online to gather general history, brand assets, site plans, and other site-specific context that will be generative
    Download Sublime Text
    Lecture Slides 🛝 🛝 🛝 Web Browsers, HTML, Markup
    Coding for Vibes/Moods 😎 🐦‍⬛ 🌊
    “Type Motion Experiment #02 (Futura),” Ian Besler,
    Superb Bird-of-Paradise (Lophorina superba) “trance” dance, Cornell Lab of Ornithology,
    “13 perfect beach GIFs to calm you when you’re stressed,” Sammy Nickalls, Yahoo News,
    My Neighbor Totoro (dir. Hayao Miyazaki, Studio Ghibli, Toho Co., Ltd.),
    Kiki’s Delivery Service (dir. Hayao Miyazaki, Studio Ghibli, Toei Company, Ltd.),
    Spirited Away (Susuwatari) (dir. Hayao Miyazaki, Studio Ghibli, Toho Co., Ltd.),
    Spirited Away (dir. Hayao Miyazaki, Studio Ghibli, Toho Co., Ltd.),
    The Wind Rises (dir. Hayao Miyazaki, Studio Ghibli, Toho Co., Ltd.),
    “After Dark 2.0,” (Berkeley Systems, Macintosh OS 7), , (Internet Archive)
  3. Week 5: Research Booklets
    Design News 🗞️ 📢 📰
  4. Week 4: Design Process Documentation 📸 📸 📸
    Step-by-Step Instructions: Animated GIFs 🎁 🎁 🎁
    Design Process Documentation 📸 📸 📸
    Printing in GHH G12 🖨 ️ 🖨 ️ 🖨 ️
    Due Thursday (9/19) Class Session ⚠️ ⚠️ ⚠️
    Design Methodologies: Page Layout 📄 📄 📄
  5. The Elements of Design ▢ ▣ ◩ 🌈 📏 🪨
    1. Field (Space) ▢
    2. Form (Shape, Line) ▣
    3. Value ◩
    4. Color 🌈
    5. Dimension 📏
    6. Texture 🪨
  6. Week 3: Critique & Design Research 🤔 💭 💬
    Book Binding 🧵 🪡 📚
    Due Tuesday (9/17) Class Session ⚠️ ⚠️ ⚠️
    The Elements of Design ▢ ▣ ◩ 🌈 📏 🪨
    1. Field (Space) ▢
    2. Form (Shape, Line) ▣
    3. Value ◩
    4. Color 🌈
    5. Dimension 📏
    6. Texture 🪨
    Book Cover Critique Activity 🤔 💭 💬
    “New Class, Who ‘Dis?” Presentations
  7. Week 2: Book Binding & Pagination 📑 🪡 📚
    Book Binding & Pagination 📑 🪡 📚
    • Book Binding & Pagination
    • As we look through the inspiration file above, I want to hear from each of you about your initial plan for Project 1 — what kind of binding methods, materials, sizes, or other considerations are you interested in pursuing for our first project?
    WARNING! GRADING! ⚠️ ⚠️ ⚠️
    • Grades and feedback will be posted on Bridges later today/tomorrow
    • Grades may be challenging ⚠️ ⚠️ ⚠️
    • I’m giving everyone the option to revise and resubmit Exercise 1.1 before next Thur. for a possible grade revision
    Digital Workflow
    • No PDFs larger than 10MB
    • Use department naming standard:
    • 24FA_DSGN110_01_Ex1_1_Lastname_Firstname.pdf
    Due Tuesday (9/10) Class Session ⚠️ ⚠️ ⚠️

  8. Participation Activity 1.1: “New Class, Who Dis’?”

    9. Tuesday, Week 2: Design Critique 📌 💭 🤩
    Group Critique 📌 💭 🤩
    1. Exercise 1.1: “See n’ Say”
    2. Design Critique is…
      • (Hopefully) Fun & casual
      • Never personal, never punative
      • Always respectful, always constructive
      • Tell us the story of your creative process
      • What’s working? What isn’t working?
    Design Research 🧐 🔬 🥼
    1. Type IRL (Arena Channel 🌀 🌀 🌀)
    2. Type IRL (Google Slides 🛝 🛝 🛝)
  9. Week 1: Introductions 👋 👋 👋
    Professor’s Greetings 👋 👋 👋
    Due Next Class Session ⚠️ ⚠️ ⚠️
    1. Exercise 1.1: “See n’ Say”
    Readings 📚 📚 📚
    1. “The Crystal Goblet, or Printing Should Be Invisible,” from The Crystal Goblet: Sixteen Essays on Typography by Beatrice Warde,
    2. “Why Typography Matters,” from Typography for Lawyers, 2nd Edition by Matthew Butterick, .
    Professional Designer Case Study 🧐 🧐 🧐
    • The World Through My Lens Series by Heejae Kim, -

Designers

Morning

Afternoon

Exercises

  1. Exercise 2.3: “Revised Mood Boards and Style Tiles”

    Design Research  Visual Ideation  Project Development
    Project 2 “Type/Trance”

    “Revised Mood Boards and Style Tiles”

    Based on the feedback and discussion in our group critique, revise your Exercise 2.2 “Mood Boards and Style Tiles” to focus on:

    • Image density
      • We need to see more visually intense and exhaustive design compositions
      • Minimum of twenty (20) images per Mood Board
    • Logomark, wordmark, and slogans/taglines
      • Show more extensive visual studies of your client’s identity system
      • Start exploring approaches that you might take for your motion design of the logo itself (storyboards with 4-8 frames)
      • Redesign the existing identity system, or develop additional marks and assets for the existing identity system
    • Site-specific research of your chosen client/site
      • Your own photographs of the building exterior, interior, and installation site
      • Any available building plans and programming details
      • Google Maps satellite view of the site
      • Google Street View snapshot
    • Historic research
    Lecture Slides
    Assignment Submission Instructions

    Submit your two (2) revised mood boards/style tiles to the Bridges assignment page as PDF files.

    • Tabloid size, landscape layout (17 inches wide × 11 inches tall)
    • No PDF larger than 10 MB

    Use department naming standards for all of your work files and assignment submissions:

    • 24FA_DSGN110_01_Ex2_3_Lastname_Firstname_01.pdf
    • 24FA_DSGN110_01_Ex2_3_Lastname_Firstname_02.pdf
  2. Exercise 1.4: “Get in Loser, We’re Going to the Archive”

    Design Brief

    Use The Internet Archive (archive.org) to print and bind a set of three (3) small booklets, each at least thirty-two (32) pages in length.

    Your goal is to spend at least one-two (1-2) hours searching the archives and to discover, print, and bind booklets from sources that are:

    • The Weirdest
    • Most surprising
    • Most random
    • Most beautiful

    … That any of us have ever seen.

    A few of the examples that we found together as a class:

    Please review the printing instructions for the exercise:

  3. Exercise 1.3: “Research Book Dummies”

    Design Brief

    Design, print, and bind two (2) different book dummies for your “Type IRL” Research Book. The goal of designing miniature book dummies is to experiment with different design approaches for the page layout and pagination (how the content is distributed across the pages and folds).

    This research book needs to creatively display the work that you generated for Exercise 1.1 “See n’ Say”:

    • Ten (10) photographs of “Type IRL” (typography on store signs, bumper stickers, tags/graffiti, etc.
    • Ten (10) typographic compositions that you created using “Tracing Mask” tool in Adobe Illustrator to extract and remix typography from the photographs

    Specifications/Requirements 🚦 🚦 🚦

    • Create at least two (2) miniature layout dummies of your “Type IRL” Research Book
    • (Example book dummy images can be found in the Creative Inspiration File)
    • Each dummy must contain all of your “Type IRL” photos and your type compositions from Exercise 1.1 “See n’ Say”
    • Each dummy should be at least thirty-two pages
      • Remember that eight (8) folios = thirty-two (32) pages, because one folio consists of four (4) pages
    • Suggested dimensions: 4.25" wide X 2.75" tall (letter size paper cut into eight folios)
    • Some pages can be empty (but challenge yourself to create some additional typographic experiments and compositions to fill the empty pages)

    Have each dummy printed, neatly cut/trimmed, folded/bound, and ready to present and discuss at the beginning of class Layout dummies are extremely “low-level” design ideation tools, so these layout dummies can be relatively “rough” in terms of how they literally depict details such as typefaces, colors, paper stock, etc. The primary concern is to convey details about the placement and scale of titles, images, illustrations, graphics, and body text.

    Focus On 👓 🎯 🔍

    • Variety. Don’t reproduce the same layout over and over again – push yourself to create as many distinctly different layouts as possible
    • Visual Density. Are some pages too typography heavy? Are some pages too graphically heavy? Experiment with placement, position, and positive and negative space between your content to create a sense of balance across the entire composition
    • Orientation/Grid. Rotate! Don’t just settle for a traditional horizontal layout. Experiment with perpendicular arrangements. Experiment with a diagonal grid! Experiment with an elliptical (circular) grid!
    • Fold/Binding. Are the pages of your research book simply folded on the left edge? What if the fold was on the top edge? What about an accordion fold? Begin to think about your binding strategy: Are the pages simply folded? Are they stapled? Are they sewn? How do these material choices reflect the material qualities of your research material?

    Getting Started

    Take about 10-15 minutes to flip back through our book-binding inspiration research file:

    Also, here is a sneak-peak at our slide deck for next class session:

    As you review all of that creative inspiration and graphic design methodology, spend some time sketching or collaging your creative process as you develop your “Type IRL” research book.

    Assignment Submission Instructions

    Paper submission: Stapled/sewn research book dummies.

  4. Participation Activity 1: “New Class, Who ‘Dis?”

    Activity Brief

    Prepare a 5-10 min. casual presentation with a collection of images and responses to the prompts below in order to introduce yourself to everyone. Use any presentation software you like (Google Slides, Keynote, Powerpoint, etc.)

    1. How you’d like everyone to refer to you (i.e. name, pronouns)
    2. Any details about your background you’d like to share (activities, hobbies, sports, where you’re from, where have you lived/traveled, major, etc.)
    3. Some imagery and information about a recent project or creative work of yours (maybe something that you worked on over the summer break)
    4. A designer/artist/creator who inspires you (images of their work)
    5. Gather at least five (5) animated GIFs that you think capture a vibe/mood/feels (This could include your current mood, a mood that you are aspiring for, the mood that you imagine your fellow classmates are feeling, or how you’re going to be feeling when class is over today)
    6. We need some music for our class work sessions:
      • Share links to at least three (3) songs that you like to listen to when you work
      • Because work/life balance in important, share links to at least three (3) songs that are definitely not helpful to listen to while working (i.e. “play/party” songs)

    Assignment Submission

    Submit your presentation as a PDF (the animated GIFs probably won’t work in the PDF, but that’s OK).

    Use departmental naming standards for your work files and assignment submissions:

    24FA_DSGN110_01_Ac1_1_Lastname_Firstname.pdf

  5. Exercise 1.2: “Judging Books By Their Covers”

    Design Brief

    Spend at least one hour in the RWU Library and take photos of at least ten (10) book covers, specifically with attention to typography 👀 👀 👀.

    Find…

    • Five (5) book covers that you like 👍 👍 👍
    • Five (5) book covers that you dislike 👎 👎 👎
    • The name of the designer for each book cover (cover designer credit is typically placed on the inside of the jacket fold, or on the back cover)
    • Provide a link to the book cover designer’s portfolio online

    The primary goal of this assignment is to find book covers that exemplify unique, interesting, or surprising use of typography and typographic form in combination with photographs, illustrations, and other graphic expression. The secondary goal of this exercise is to find book covers that nobody in the class has ever seen before. Avoid obvious or familiar book covers. Be thorough! Try to find the most obscure and amazing book covers that you possibly can.

    This is fieldwork, so our documentation needs to reflect that fact. Take pictures of the actual book covers. Do not download images of book covers from the internet.

    You are also free to visit other libraries or book stores, but your photographic documentation must be of printed, physical books.

    Assignment Submission

    Layout your photographs, designer credits, and links using any software you choose and submit your work as a PDF.

    Ian’s Example 😎 😎 😎 Book Covers
    Cover design by Lori Lynch, Senior Designer, University of Alabama Press
    Cover design by Devin Grosz
    Cover design by [uncredited]
    Cover design by Tony Lyons, Estuary English
    Cover design by Karl Spurzem
    Cover design by…
    Cover design by…
    Cover design by…
    Cover design by…
    Cover design by…
  6. Exercise 1.1: “See n’ Say”

    Design Brief

    Using only photos that you’ve taken of “Type IRL” apply principles of visual communication to design ten (10) typographic mini-posters (5.5 inches wide × 8.5 inches tall) with memorable, unique, and visually interesting typographic expressions.

    Step 1: Photo Collection

    First, you will need to spend roughly 1-2 hours walking around Providence, Bristol, Newport, or other town centers (not just campus) looking for typography in situ. This could include signs, banners, flags, caution tape, billboards, retail storefront displays, graffiti, or any other examples of lettering in “the real world” that you can photograph.

    Take at least ten (10) different photos of typography in the real world. The photographs should not be boring. Visual research material must always be carefully composed, intentionally framed, and visually diverse.

    Ian’s Example 🌆 🌆 🌆 Providence Photos

    Step 2: Typographic Mini-Posters

    After you have collected your photots:

    1. Place the photos into an Adobe Illustrator artboard
    2. Use the Image Trace tool (in the Control Bar) to convert the photograph from raster (bitmap) to vector
    3. Click on the shape to select the vector components
    4. Under the Object menu, select “Expand” to expand the shape
    5. Under the Object menu, select “Ungroup” to ungroup the shapes

    Then reorganize the letters to create your memorable, unique, and visually interesting typographic expressions.

    ⚠️ ⚠️ ⚠️ HINT ⚠️ ⚠️ ⚠️ Use an online anagram generator to help generate phrases from your source lettering:

    Ian’s Example Work Files 😎 😎 😎
    Ian’s Example 😎 😎 😎 Typography Mini-Poster

Projects

  1. Project 1: “Type IRL” Research Booklet

    Design brief: Design a research booklet on the topic of “Type IRL”. This booklet will consist of photographs that you have taken from the local area, and additional research imagery, as well as typographic design studies derived from those photographs and images.

    Project Deliverable:

    • Printed and bound booklet
    • 32 pages (minimum)
    • b/w or color
    • Neatly and deliberately bound
  2. Project 2: “Type/Trance: Coding for Vibes/Moods

    Design brief: Use entry-level creative coding techniques (i.e. HTML5, CSS3, jQuery, P5, etc…) to create a package of three (3) different location-specific typographic animations for screens.

    Project Deliverable: Three (3) looping animations, 60 secs. each

    Client/site selection could include:

    Activism, Awareness, Non-Profit Sector

    • Pet rescue, pet adoption
    • Political campaign

    Cultural Sector

    Fantasy/Speculative Sector

    • The middle of nowhere
    • The moon
    • Mars

    Hospitality Sector

    • Restaurants, bars, lounges
    • Hotels
    • Cruise ships
    • Vineyards

    Office/Professional Sector

    • Airports
    • Corporate campus lobby

    Retail Sector

    • Dispensaries
    • Escape rooms
    • Pop-up boutiques (influencers, streetwear)

    Spirituality/Faith Sector

    • Church, mosque, temple, etc.

    Wellness/Health Sector

    • Gym
    • Hospitals, clinic, treatment centers
    • Pilates studio
    • Retirement facility
    • Spinning studio
    • Yoga studio
    • Hospice care facility

    Design Case Studies

    David Geffen Hall, 2x4, , Lincoln Center, New York City
  3. Project 3: “Type in Data Visualization” “Type and Information Visualization”
  4. Project 4: “Type in Experiences” Logos +Packaging

Resources

Syllabus

Basic Course Information
Instructor Information
Catalog Description

This course introduces students to the fundamentals of typography, including letterform anatomy and structure, type classification, and communication in various contexts. The intellectual and psychological impact of typographic composition when presented alone or in combination with image is explored. Historical forces that motivated advances in typography are discussed. All projects are developed to industry standard presentation level with an emphasis on basic fabrication craftsmanship skills.

Delivery: Studio