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

Creating a Modular Scale for a harmonious typography

The Modular Scale was created by Tim Brown. There are different ways to create a Modular Scale for typography. In our example, we're going to create a Modular Scale using two base numbers and one ratio. The multiplication of these numbers creates a scale that's harmonious and proportional between all the values.

The most well-known ratio is the golden ratio also known as the golden section, divine proportion, and so on. Its value is 1.618.

Now, to avoid unnecessary mathematics, the golden ratio is based on the Fibonacci sequence: 1, 1, 2, 3, 5, 8, 13, 21, and so on.

These numbers have the following pattern: the next number is the result of adding up the two numbers before it. For example:

0 + 1 = 1 + 1 = 2 + 1 = 3 + 2 = 5 + 3 = 8 + 5 = 13 + 8 = 21…

The idea here is to understand the intent of creating a set of numbers that are harmonious when used together. We are going to do the same to create a typographic scale to use in our projects with the Modular Scale web app and forget about manually calculating the relative font sizes for your project.

So let's check out the Modular Scale web app built by Tim Brown and Scott Kellum: http://www.modularscale.com/.

Once the web app opens, there are three steps we need to do in order to create our Modular Scale:

  1. Define the first base number.
  2. Define the second base number.
  3. Choose a ratio.

Tip

The Modular Scale can be used in anything that uses a value of some sort, not only typography. It can be used for padding, margin, line-height, and so on. Our focus in this chapter is, however, on typography.

Defining the first base number

The recommended way to define this first number is to use the body text size, that is, the font size that is used in the paragraphs. But keep in mind that using the body text size as the first base number is not mandatory. We can use our typeface's x-height, or some other length within that typeface, that we think could be a good starting point.

Although we can choose any font size, let's start with the default one we all know all browsers use, 16px. So we type 16px in the first base field.

Click on the plus icon and add a second base field.

Tip

Don't worry about the font size preview of the app yet, as you can see, as we type numbers for our base values, the font sizes on the right preview pane change. We'll get to that in the next step.

Defining the second base number

The second base field is what I call a magic number because this number is completely subjective and arbitrary, however, it's tightly related to the project we're working on.

When I say tightly related I mean something like using the width of the main container, for example, 960px, 980px, 1140px, and so on. Alternatively, it can also be the number of columns used in the grid, such as 12 or 16. It can also be the width of a column at the maximum width of the site, such as 60px, or even the gutter spacing, say 20px.

This magic number is anything we want it to be, but it's directly related to our project in one way or another. For this example, let's say we're going to target screens at a maximum width of 1280px, so our main container is going to have a maximum width of 1140px. So let's type 1140px in the second base field.

Choosing a ratio

This is where the magic takes place. Choosing a ratio means that this ratio will be multiplied by the base numbers creating a scale of values that are proportionally related.

The ratios are based on musical scales, and in that list is the golden ratio (1.618) as well, if we decide to use it. From the Ratios dropdown, select 1:1.618 – golden section ratio.

That's it! We have now created our first Modular Scale.

The font sizes provided by this Modular Scale are totally harmonious because they are proportionate to each other based on relevant values that are directly related to our project:

  • The ideal body font size is 16px
  • The maximum width of our main container is 1140px
  • The Golden Ratio is 1.618

Our typography now has a solid modular foundation, let's use it.