Virtual Seminar

Typography in Responsive Web Design

April 2013

87 minutes

  • Use typography as a basis for responsive design
  • Set type for readability across multiple devices
  • Improve web font performance
  • Use advanced CSS3 features

You’re dealing with different screen sizes and resolutions. You may already be trying to integrate responsive web design in your process as a way to account for this mobile reality. You may well be daunted by the sheer number of devices out there.

Typography can come to the rescue…

Find out how from Richard Rutter. He’ll describe how to make web typography work across any number of different devices, and how it can and should be the basis of any responsive web design.

He’ll tell you why good typography matters (you may be surprised) and how to perfect the typography in your own designs using OpenType and cutting-edge CSS features you can safely use right now.

Richard will take you through the how and why of choosing web fonts and pairing typefaces, and he’ll describe a range of options for optimizing the display of web fonts across different devices.

  • Use typography as a basis for responsive design

    You'll see real-world examples of when to use—and not use—certain
    web fonts.

    • Differentiate between typography for impact v. immersion
    • Be among the first to use a page Richard is creating to help you choose
  • Set type for readability across multiple devices

    You'll become an authority on how typography affects UX.

    • Dig into the importance of micro-typography in creating an experience
    • See how to use small caps, tabular numerals, and old-style numerals
  • Improve web font performance

    You'll hear several different ways to load fonts faster.

    • Get an overview on how media queries can improve or disrupt performance
    • Load fonts more quickly, especially on small screens
  • Use advanced CSS3 features

    You'll stop only using screen sizes to define your designs.

    • See how and why typography can define the way your design should respond
    • Find out what to consider when designing and developing mobile-first