Table of Contents for
Mastering Responsive Web Design

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Mastering Responsive Web Design by Ricardo Zea Published by Packt Publishing, 2015
  1. Cover
  2. Table of Contents
  3. Mastering Responsive Web Design
  4. Mastering Responsive Web Design
  5. Credits
  6. About the Author
  7. Acknowledgment
  8. About the Reviewers
  9. www.PacktPub.com
  10. Preface
  11. What you need for this book
  12. Who this book is for
  13. Conventions
  14. Reader feedback
  15. Customer support
  16. 1. Harness the Power of Sass for Responsive Web Design
  17. The basic concepts of Sass for RWD
  18. Summary
  19. 2. Marking Our Content with HTML5
  20. The
  21. The
    element
  22. The
  23. The
    element
  24. The
  25. The
  26. Using WAI-ARIA landmark roles to increase accessibility
  27. A full HTML5 example page with ARIA roles and meta tags
  28. Output screenshots for desktop and mobile
  29. Summary
  30. 3. Mobile-first or Desktop-first?
  31. Sass mixins for the mobile-first and desktop-first media queries
  32. Dealing with legacy browsers
  33. How to deal with high-density screens
  34. Sometimes RWD is not necessarily the right solution
  35. Retrofitting an old website with RWD
  36. Retrofitting with AWD
  37. Retrofitting with RWD
  38. Summary
  39. 4. CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD
  40. CSS grids
  41. CSS frameworks
  42. UI kits
  43. The pros and cons of CSS frameworks for RWD
  44. Creating a custom CSS grid
  45. Building a sample page with the custom CSS grid
  46. Stop using CSS grids, use Flexbox!
  47. Summary
  48. 5. Designing Small UIs Driven by Large Finger
  49. The posture patterns and the touch zones
  50. The nav icon – basic guidelines to consider for RWD
  51. The navigation patterns for RWD
  52. Summary
  53. 6. Working with Images and Videos in Responsive Web Design
  54. Third-party image resizing services
  55. The element and the srcset and sizes attributes
  56. Replacing 1x images with 2x images on the fly with Retina.js
  57. Making videos responsive
  58. The Vector Formats
  59. Summary
  60. 7. Meaningful Typography for Responsive Web Design
  61. Calculating relative font sizes
  62. Creating a Modular Scale for a harmonious typography
  63. Using the Modular Scale for typography
  64. Web fonts and how they affect RWD
  65. Sass mixin for implementing web fonts
  66. Using FlowType.js for increased legibility
  67. Summary
  68. 8. Responsive E-mails
  69. Don't overlook your analytics
  70. Recommendations for building better responsive e-mails
  71. Responsive e-mail build
  72. Third-party services
  73. Summary
  74. Index

Chapter 7. Meaningful Typography for Responsive Web Design

As I said in one of my talks at the Dayton Web Developers meeting:

"With a solid typographic scale you might even get away with not using a single image on your website."

The power of typography has got to be one of the most underappreciated assets in web design. Admittedly, we are seeing more and more designs where typography has been strongly considered, playing a major role in creating the intended atmosphere of a website or app.

In this chapter, our focus is going to be on a few aspects, tips, and tricks about the things we need to consider for RWD from a typography stand point.

We're going to talk about:

  • Pixels, ems or rems for typography?
  • Calculating relative font sizes.
  • Creating a Modular Scale for a harmonious typography.
  • Using the Modular Scale for typography.
  • Web fonts and how they affect RWD.
  • Using FitText.js for fluid-size headings.
  • Using FlowType.js to improve legibility.

Pixels, ems, or rems for typography?

It is difficult to decide whether to use pixels, ems, or rems for typography. It's a matter of style. Some web designers/developers still use pixels as their unit to declare font sizes. It's just a lot easier to wrap our heads around the sizes.

The issues with setting font sizes in pixels were basically on legacy IEs, where, if the user wanted to zoom in on the page for whatever reason, the text would stay fixed at the pixel size it was given.

Now, that's a thing of the past as far as modern browsers are concerned. When you zoom in any modern browser, if it's zoomed in enough, it will trigger the media queries, hence showing the mobile version of the site.

Another problem with pixel-based font sizing is that it's hard to scale and maintain. What this basically means is that we'd have to declare the font sizes of many more elements in every media query, over and over and over.

On the other hand, we have relative units, ems and rems, which are pretty much the recommended way of setting our font sizes.

However, the problem with ems is that we have to keep track (mentally, in CSS/HTML comments, or in a text file somewhere) of the sizes of the parent containers, which can easily turn into a font management nightmare. A font size in ems depends on the font size of its parent container. So if we have different levels of nested containers, things could get ugly really fast because keeping track of the parent container's font sizes is not easy.

But then rems came along. Rem means root em. The root is the <html> element.

Rems bring pretty much the best of both worlds: we can declare font sizes in rems with the same mental model that we declare pixels, but with the benefit of using relative units like ems. The only problem with using rems is that legacy browsers don't support this unit, so a pixel-based, font size fallback value needs to be accounted for. This is where a short Sass mixin comes and saves the day.

But let's start with the core strategy of this chapter before trying any Sass tricks.