Best practices for responsive typography

Igor Bumba

Front-end developer

Every front-end developer tries to tackle with this beast called responsive typography. Should you use px, em or rem units when writing CSS? Yes, you should, you can use all of them and much more.

Start with pixels

Every designer and front-end developer is familiar with the one and only px units. Pixels are fixed-size units used in screen media. One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). The biggest problem with pixel units is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

When you are starting to write your CSS/SCSS, your code might look like this:

See the Pen Example 1 by Bumba (@igorbumba) on CodePen.0

You could replace existing values with SCSS variables. They could be very useful for making variables reusable throughout a project but are still messy to maintain.

See the Pen Example 2 by Igor (@igorbumba) on CodePen.0

You see where the problem is here? Do not panic; we still didn’t hit a brick wall with this. SASS maps are here to the rescue. Except for font size they can help you manage z-index values, line height, colors, etc.

FYI – I don’t use the mobile-first method when I’m writing HTML and CSS, so you keep that in mind for now.

For example, let’s create SCSS mixin for responsive breakpoints and four media query breakpoint variables (large, medium, small, extra small). After creating those, we should create SCSS mixin with SASS map combining SCSS mixin for responsive breakpoints that we’ve written before. Now we continue with creating SASS map with key-value pairs – breakpoints as keys and font sizes as corresponding values. Putting it all together:

See the Pen Example 3 by Igor (@igorbumba) on CodePen.0

You can still split those mixins and variables into two different files so you can better manage and organize your SASS/SCSS project.

Continue with modular scale for your typography

If you don’t know how to pick font size for your elements (<h1> to <h6>) try using modular scale tool. It will help you choose right typography sizes that will match well with the rest of your page.

Screen Shot 2016-04-03 at 14.33.00

To get started with Modular scale, you can visit the homepage for the tool or install it in your SASS project by visiting GitHub page.

Try using one base font size for the body, something like 14px – 18px. For all child elements use em or rem units. Later when you change the base font size of the body, all child elements will adapt and proportionally vary based on your primary font size.

Improve vertical rhythm with line height

Line heights are the most important part of achieving consistent vertical rhythm throughout your website or web application. Try to avoid using pixel units with line-height property. Instead, use unitless values for line-height. You can write mixin or function in SASS to calculate line height for a particular element that has font-size and line-height in pixel units. Just set the main line-height for that element and don’t worry about responsive downward of font size.

See the Pen Example 4 by Igor (@igorbumba) on CodePen.0

Use em or rem for responsive font size

Em is a scalable unit equal to the current font size in the document. If you haven’t set font size by default, then the browser will set it for you. Browser default font size would typically be 16px. So 1em equals 16px by default. If you set font size for document 14px, 1em would equal 14px, 2em would equal 28px, 0.5em would equal 7px, etc. Recommended units are em and rem due their scalability and their mobile device friendly nature.

What’s the main difference between EM and REM?
Em, the unit is relative to the font size of its parent element while rem unit is only relative to root font size of the HTML document. Rem unit is kind of reset for font size if their relative parent has fixed font size.

When I get PSD from a designer, the font size is in px or pt units, so how do I convert it to em or rem?
Very simple! To turn pixels into ems, we simply take target font size and divide it by base font size. This one function is from a Web Design Weekly article:

See the Pen Example 5 by Igor (@igorbumba) on CodePen.0

This function uses SASS string interpolation to append em to the value. When calling the function in your SASS/SCSS project, you only need to define first value (pixels), and the math will do the rest, it will be calculated relative to a $browser-context value which is in this case 16px.

Another example is with SASS unitless() method. This one allows you to use px units or not in the function call:

See the Pen Example 6 by Igor (@igorbumba) on CodePen.0

Let’s wrap it up together using SASS maps, px to em function and media queries:

See the Pen Example 7 by Igor (@igorbumba) on CodePen.0

Viewport units

Although, not all browsers support them and are rarely seen in CSS, but nevertheless, they are worth mentioning. You can check the list of all browser and known issues with these units by visiting http://caniuse.com/#feat=viewport-units.

Viewpoint units represent a percentage of the browsers viewport dimension, and they can scale accordingly on window resize. They will calculate depending on browsers window size/resize or device rotation. For example, let’s say we have a viewport of 1200px (width) by 600px (height):

  • vw – represents 1% of the viewport’s width – in our case we have <h1> with a font size of 5vw which equals 60px
  • vh – represents 1% of the viewport’s height – in our case we have <h2> with a font size of 4vh which equals 24px
  • vmin – represents a percentage of the minimum of the two – in our case  we have <h3> with a font size of 3vmin which equals 24px since we are in landscape mode
  • vmax –  represents a percentage of the bigger dimension – in our case we have <h4> with a font size of 1.5vmax which equals 18px

See the Pen Example 8 by Igor (@igorbumba) on CodePen.0

Conclusion

Today’s best practice for straightforward and efficient responsive typography are SASS maps and em/rem units. SASS maps will help you organize your typography in one place and em/rem units will help you keep font size in place, and therefore you can easily maintain your SASS/SCSS project keeping the web beautiful.

Author

Igor Bumba

Front-end developer

Secretly known as Batman. Although seemingly unremarkable in appearance, the utility belt is one of Batman's most important tools in fighting code. Consisting primarily of a HTML, SCSS, and JS, the utility belt houses Avocode pouches or Photoshop cartridges that are attached to the outside of the belt.

All stories by Igor

SIGN UP FOR OUR MONTHLY NEWSLETTER

Get more digital stories directly in your inbox.
Your email is saved
Join the discussion

No Comments

Share your thoughts

Let's work together  →
Go to top
css.php