Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Converting Pixels to Ems for Responsive Typography

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:03
    Responsive Typography
  • 0:05
    with Amber Himes Matz
  • 0:09
    Now that we have a flexible layout based
  • 0:11
    on percentages, we want to add that same flexibility to our typography.
  • 0:17
    This is far from a textbook case since we are updating an existing
  • 0:21
    theme instead of working from a Photoshop comp
  • 0:23
    with absolute widths and pixels.
  • 0:26
    In fact, some of our font sizes are already in ems, which is great.
  • 0:30
    First, we'll take a look at how the font sizes have already
  • 0:34
    been declared in 960 robots theme.

Responsive Typography


We're making progress in making our theme more flexible and fluid. Next, we’ll address our site's typography and implement relative font-sizing. This will help ensure that our text is more legible without the need to pinch and zoom. To do this, we’ll convert our font-sizes declared in pixels to ems, using the target ÷ context = result formula. Break out those calculators!

Log in or sign up to download companion files.
Additional resources: (Checkout branch 04-responsive-typography)