100% Responsive Typography System using a Modular Scale.

By: Ricardo Zea - Web Designer

December 17, 2019

“New to The Web” discussion group

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

I mean this:

Who is this Ricardo feller?

• Originally from Colombia. Don't let my "good" English deceive you.

• Moved to Dayton in 2006, married and have a 9-year old son, and two cats.

• Web designer for a ‘little while’.

• HTML+CSS Expert Mentor on Codementor.io

• Wrote two books:

   - Mastering Responsive Web Design: masteringrwd.com

   - Web Developer's Reference Guide: tiny.cc/web-devs-reference-guide

• Wrote for Smashing Magazine:

   - An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements

• I designed the Dayton Web Developers logo.

• "I don't think there are dumb questions, it's just dumb not to ask."

• Windows 😁, Mac 🤢.

 
 
 
 

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

Approach

I am a designer, not a developer, so there will be a combination of basic math and “it-feels-just-right”, not intricate explanations or convoluted formulas.

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

So, what in the world is a

“Modular Scale”?

  • It's a sequence of numbers.
     
  • Those numbers are related to one another.
     
  • That relationship is meaningful.

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

Current Problems When Dealing With
Non-Responsive Typography

  1. Font sizes are too small or too big., or the same size at every viewport, a.k.a., not responsive.
     
  2. Too many media queries to control font sizes.
     
  3. Too many font-size declarations to control font sizes.
     
  4. Lose track of the parent-child relationship when declaring font sizes.

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

Objective

Create a pleasant and responsive UX reading experience.

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

How to create a Modular Scale?

  1. Go to modularscale.com
     
  2. Add 1em to first base value.
     
  3. Add 1140em to the second base value.
     
  4. Add 12em to the third base value.
     
  5. Add a Ratio of 1.3.
 

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

The Smooth Curve

For best results, use an MS with a smooth curve.

https://www.modularscale.com/?1,1140,12&em&1.3

 

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

The Smooth Curve

NOT!

Notice the 1.5 Ratio. Not a smooth curve.

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

Create a Responsive Font

  1. Create a base HTML (anonymous demo).
     
  2. Add this to the body:
    font-size: calc(12px + 1vw);
    
    
  3. Make the main container 1140px wide.
    .main-ctnr {
      width: 100%; /* For small screens */
      max-width: 1140px; /* For large screens */
      margin: auto; /* Center the container in the viewport */
    }
  4. Set the viewport at 1140px wide.
     
  5. Wiggle! Disclaimer: This step is TOTALLY visual.
    .35vw
 
 

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

Somethings up with the headings dude…

😒

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

Modular Scale, help me bruh!

Define font sizes for all six headings using the Modular Scale:

h1 { font-size: 1.912em; }
h2 { font-size: 1.616em; }
h3 { font-size: 1.471em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.243em; }
h6 { font-size: 1.132em; }

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

And were done!

Thank you! - Gracias!

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

100% Responsive Typography System using a Modular Scale - http://tiny.cc/responsive-type

100% Responsive Typography System using a Modular Scale.

By: Ricardo Zea - Web Designer

December 17, 2019
 

New to The Web discussion group

100% Responsive Typography System using a Modular Scale

By Ricardo Zea

100% Responsive Typography System using a Modular Scale

Using a modular scale, some basic CSS and a bit of "eye balling", I show you how to create a responsive typography system. Slides done for the New to The Web discussion group in Dayton, OH.

  • 649