Written under: Responsive Typography

20th April, 2016

Last week, I wrote a tutorial to show you how to use the mixins and functions of Typi, a library I’ve created for responsive typography. There’s a lot more to Typi that I can cover in one article. This week, I’m going to show you some advanced tips that I use with Typi so you can use them as well.

You’ll learn:

  1. How to output em media queries with Typi
  2. How to use Typi with the Modular Scale library
  3. How to combine Modular Scale and Vertical Rhythm with Typi.

Sounds exciting, doesn’t it?

Before moving on, make sure you already know how to use the basic mixins and functions that Typi provides . Nothing is going to make sense without the foundations.

Let’s begin.

EM Media Queries with Typi

In theprevious article, I showed you how to create multiple media queries with Typi just by using the $breakpoints and $typi maps. Although that’s neat, we have a problem. The media queries created by Typi are written in pixels. It’s a practice that web professionals should frown upon :(

We should use em media queries instead. I’ve went deep down the rabbit hole to tests different types of media queries and found that em media queries work the best across all browsers. You can read more about that inthis article.

Moving on, there are two ways to make Typi create em media queries. The first way is to write your $breakpoints map with em units:

$breakpoints: (   small: 25em, // 400px   large: 50em // 800px ); 

This works because Typi outputs any value you provide to the $breakpoints map. The CSS output from the above breakpoints map $breakpoints map resembles the following (Note the media queries):

html {   font-size: 100%;   line-height: 1.4; } @media all and (min-width: 25em) {   html { font-size: 112.5%; } }  @media all and (min-width: 50em) {   html {font-size: 125%; } } 

This works. We have em media queries now.

But it’s not elegant. You have to calculate the em values yourself. It’s a big headache and we developers like to keep things simple :)

There’s an alternative (much better way) to tell Typi to create em media queries. You can use libraries that output media queries in em with Typi. Examples of these libraries include mappy-breakpoint and breakpoint .

Typi supports both libraries out of the box. Let me show you how to use them.

First of all, choose a library you’re comfortable with and install it.

Mappy Breakpoints:

  • bower : bower install mappy-breakpoints --save
  • npm : npm install mappy-breakpoints --save

Breakpoint:

  • bower: bower install breakpoint-sass --save
  • npm: npm install breakpoint-sass --save

After installing the library, make sure you @import them before importing Typi:

// Choose either one. Make sure it comes before Typi @import 'path-to-mappy-breakpoints/mappy-breakpoints'; @import 'path-to-breakpoints/stylesheets/breakpoint';  // Import Typi @import 'path-to-typi/scss/typi'; 

The next step is to tell Typi to use either mappy-breakpoints or breakpoint by setting the $typi-breakpoint setting.

// If you use mappy-breakpoints $typi-breakpoint: mappy-breakpoints;  // If you use breakpoint $typi-breakpoint: breakpoint; 

Once you’re done with these steps, go ahead and try compiling your Sass files. You see that pixel values within the $breakpoints map are converted into em values with both libraries.

html {   font-size: 100%;   line-height: 1.4; } @media all and (min-width: 25em) {   html { font-size: 112.5%; } }  @media all and (min-width: 50em) {   html {font-size: 125%; } } 

I highly recommend the alternative method because you can take advantage of both breakpoint and mappy-breakpoints to create more complex queries.

How about an example?

Let’s try creating a min-width and max-width query. Try this:

$breakpoints: (   small: 400px 800px ); 

Here, both Mappy Breakpoints and Breakpoint will convert the small query into a (min-width: 400px) and (max-width: 800px) query.

The only difference is that Mappy Breakpoints subtracts 1px from the max-width query ( (min-width: 799px) ) to ensure that you wouldn’t run into a case where some styles get overlapped at 800px.

/* Output from Mappy Breakpoints */ @media all and (min-width: 25em) and (max-width: 49.9375em) {   html {font-size: 112.5%; } }  /* Output from Breakpoint */ @media (min-width: 25em) and (max-width: 50em) {   html {font-size: 112.5%; } } 

You can combine various syntaxes to create any media query combination. What if you wanted to make a min-width and min-height query? This pattern is important when designing for responsive websites.

The syntax for Mappy Breakpoints and Breakpoint differ slightly when working with more complex queries. In Mappy Breakpoints, you specify a height keyword, followed by the min-height you want:

$breakpoints: (   small: 400px height 400px ); 

In Breakpoint, you need to create a list with () and specify the query you want:

$breakpoints: (   small: 400px (min-height 400px) ); 

That’s how you create a min-width and min-height query for both libraries.

I’m going to leave you here to experiment with other queries yourself. You can check out their respective documentations ( Mappy Breakpoints , Breakpoint ) for more information.

Let’s move on.

Using Typi with Modular Scale

One of the best practices of web typography is to use a modular scale to choose the font-size of your typography.

When we use Modular Scale, it’s quite common to see people either using the modular scale calculator or manually calculate font-size s by multiplying their bases with ratios over and over.

No matter which you choose, you still have to input the values manually after getting the right sizes, like this:

h1 { font-size: 3.157em; } h2 { font-size: 2.369em; } 

If you choose to change your font-size multiple at different media queries, then, this is what you’ll do:

h1 { font-size: 3.157em; } h2 { font-size: 2.369em; }  @media all and (min-width: 25em) {   h1 { font-size: 4.209em; }   h2 { font-size: 3.157em; } } 

We can do the same with Typi too. This way, there’s no need to remember to write media queries. We can just put these values into the font map (Yep, Typi font maps can take in sizes em units as well):

$h1-map: (   null: 3.157em,   small: 4.209em ); $h2-map: (   null: 2.369em,   small: 3.157em );  h1 { @include typi($h1-map); } h2 { @include typi($h2-map); } 

The problem with this approach is that it’s difficult to change the values of your modular scale.

What happens if you want to change the ratio used for the scale? You have to calculate the sizes and change the values one by one :(

Boo.

Luckily, there’s way to make this much simpler. Scott Kellum and Tim Brown have made it easy for us by creating the Modular Scale Library.

What you have to do is install the library either with bower , npm or download it manually:

  • bower : bower install modular-scale --save
  • npm : npm install modular-scale --save

Then, @import modular scale into your Scss file:

@import 'path-to-modular-scale/stylesheets/modular-scale'; 

Once you have done so, you can use the ms() function provided by the Modular Scale library to calculate the font-size s.

For example, you can write ms(3) if you wanted a value of 2.369em . It saves you a ton of effort from either calcuating or copy-pasting it.

$ms1: ms(1); // => 1em * 1.333 = 1.333em $ms2: ms(2); // => 1em * 1.333 * 1.333 = 1.777em $ms3: ms(3); // => 1em * 1.333 * 1.333 * 1.333 = 2.369em 

The default ratio used in Modular Scale is 1.333 . If you want to change this ratio, you can change the $ms-ratio setting:

$ms-ratio: 1.25;  $ms1: ms(1); // => 1em * 1.25 = 1.25em $ms2: ms(2); // => 1em * 1.25 * 1.25 = 1.563em $ms3: ms(3); // => 1em * 1.25 * 1.25 * 1.25 = 1.953em 

The good news is, since Typi takes in a em based font-size , it integrates with ms() perfectly out of the box. You can write your font-maps like this:

$h1: (   null: ms(4),   small: ms(5) ); 

Now, no more having to worry about choosing the perfect scale in Sketch or Photoshop before starting your design. Everything can be calculated for you on the fly. So, play away! Try out different scales and see which one fits your design the best!

Let’s move on :)

Combining Modular Scale with Vertical Rhythm with Typi

In the previous article, I showed you how to create line-height values both with the $typi map and your custom font map:

$typi: (   null: (16px, 1.5) // Line height of 1.5 );  $h1-map: (   null: (ms(3), 1.2) // Line height of 1.2 ); 

These line-height values (both 1.2 and 1.5) are called unitless line-height because there’s no units like px, em or rem attached to it.

Using unitless line-height is a recommended practice because children element can inherit this raw value and recompute their own line-height instead of inheriting a computed value.

Although unitless line-heights are cool, it’s difficult to maintain Vertical Rhythm if we used them, especially if you chose your font-size with Modular Scale.

Let’s walk through an example to show what I mean:

Before we continue, I’m assuming you know what Vertical Rhythm is. If not, readthis post.

Let’s say you have a font-size of 16px and a line-height of 24px. The font-size of your header text is 3.157em (50.5px).

When you use Vertical Rhythm on your sites, you want the line-height of all your text elements to be a multiple of the baseline. So, the line-height of this header text is either going to be 48px, 60px or 72px. (2, 2.5 or 3 baselines. See why you can use these multipleshere).

The question is, what is 48px, 60px or 72px? There’s no way of knowing the correct number without doing some complex math calculation. What we do know, is that 48px is 2 baselines. 60px is 2.5 baselines and 72px is 3 baselines.

If you remember, Typi has the vr() function that helps you calculate the number of baselines. It outputs the value in rems .

If you wanted to simplify the calculation, you can use this vr() function directly within your font maps to calculate the line-height variable.

$h1: (   null: (ms(4), vr(2.5)) )  h1 {   @include typi($h1); } 

The CSS produced by Typi is:

h1 {   font-size: 3.157rem;   line-height: 3.75rem; /* 2.5 baselines */ } 

This is okay because you’re unlikely to have further text within a <h1> that needs to inherit raw line-height value. Many people, like Miriam Suzanne, the creator of Susy , have been using this approach for a long time.

Note: Don’t do this with the $typi map. You’ll want the line-height to remain unitless.

Wrapping Up

That’s it for now! You’ve learned how to:

  1. Create Media Queries in em with Typi
  2. Use Modular scale with Typi
  3. Combine Modular Scale with Vertical Rhythm in Typi

There are other interesting things you can do with Typi. I’ll cover them in future blog posts :)

For now, play around with these newfound features! Let me know what you think of them in the comments below!