Explore the Future of the Web

Responsive Typography & Color

Adjusting your website's layout for different screen sizes is only the beginning of what you can do with responsive design. In this workshop, we'll go beyond layout and look at how to use media queries to adjust both the typography and the colors on your website, so the site can look its best on any screen. Content is the most important feature of a website, so you need to make sure that text is easy to read no matter what device type or screen size it's being viewed on. Color choices are also important, and can affect accessibility as well as the overall tone of a website. Together, typography and color can have a big impact on the success of your website.

This workshop will cover:

  • The advantages and disadvantages of using ems and rems to size text on responsive sites, and how to effectively use relative measurements in typography.
  • Adjusting margins and font size with media queries so that line length stays in the optimal range across viewport widths.
  • How typography choices impact performance, and what you can do to help speed up your site.
  • The basics of color theory for the web, and how your color choices can affect the readability, usability, and accessibility of your content.
  • Adjusting the colors on your website using media queries and other methods.
  • How to use a CSS preprocessor like Sass to manage colors and typography on a responsive website.

This is a hands-on workshop, so please bring your laptop. Workshop participants should have at least a basic knowledge of HTML and CSS.

– – – – – – – –

Explore the future at WebVisions NYC, Portland, Barcelona and Chicago.